3

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();
 });

James123
  • 11,184
  • 66
  • 189
  • 343

1 Answers1

3

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..

Rajaprabhu Aravindasamy
  • 66,513
  • 17
  • 101
  • 130
  • You may also want to include `` in your selector, as some browsers will add it. See [Why do browsers insert tbody element into table elements?](http://stackoverflow.com/questions/938083/why-do-browsers-insert-tbody-element-into-table-elements) – showdev Apr 15 '16 at 16:58
  • @showdev Good point. Immediate child of a table should be a tbody. Otherwise the HTML is invalid. – Rajaprabhu Aravindasamy Apr 15 '16 at 16:59