table tr:nth-child only parent level

Question

I have nested tables trying to hide top level row. But it is hiding nested table row child also. How can hide only top level row?

<table class='ms-formtable'>
<tr></tr>
<tr>
      <table>
         <tr></tr>
         <tr></tr>
         <tr></tr> // it is hide this row also
      </table>
</tr>
<tr></tr> // just need to hide only this row
<tr></tr>
</table>

Code

<script type="text/javascript">
$(document).ready(function() {
     $("table[class='ms-formtable'] tr:nth-child(3)").hide();
 });

Answer 1

You have to use child selector at this context,

$("table.ms-formtable > tbody > tr:nth-child(3)").hide();

You are using descendant selector. That will select nested tr elements. Also there is no need to use attribute equals selector while targeting an element with class. You can simply use class selector there.

You have to add tbody as an immediate child of your table. That is the valid structure. Otherwise the HTML will be considered as invalid and the selectors without tbody will not work as browsers will automatically insert a tbody..