jquery how to show-hide table column

Question

How can I hide a entire table column with jQuery?

I managed to hide a single td , but not the other 2 td s under it. Code to hide table td :

$("#td_maand").hide(); 

Answer 1

Give all the same column tds the same class, then $(".columnClass").hide();

eg

<tr><td class="firstcolumn"></td><td class="secondcolumn"></td></tr>
<tr><td class="firstcolumn"></td><td class="secondcolumn"></td></tr>
<tr><td class="firstcolumn"></td><td class="secondcolumn"></td></tr>
<script>$(".firstcolumn").hide();</script>

Answer 2

You can use the nth-child selector to achieve that, use it like this:

$('#yourtable tr td:nth-child(3)').hide();

that will hide your third column.

Answer 3

You can do it easily:

var i = [your_column_index];
$('td:nth-child(' + i + ')').hide();​

Answer 4

You can use

$(this) // assuming this points to a td
  .closest('tbody') // find closest tbody (container)
  .find('> tr > td:nth-child('+$(this).index()+')') // find all td in the same column
  .hide(); // hide them

Demo at http://jsfiddle.net/jFv6d/
( it hides the clicked column )

Answer 5

尝试$("#td_maand").parent().hide();