Hide table column using jQuery

Question

This has been asked many times, I know, but it's different! I have done this:

When you click on the minus icon, the column should disappear, it worked with php, but the code is a mess, and I would like it to work with jQuery, I found several other threads that showed me this:

$("#minus").click(function() { $("#table td:nth-child(2),th:nth-child(2)").hide(); }); 

After a while I came up with the following:

 var num = $("#columnid").index(); $("#table td:nth-child("+ num +"),th:nth-child("+ num +")").hide(); 

This worked, but I need to call it using the onclick="jquery_function();" function and let php insert the id of each header, but is that possible? Or how to do it? I am stuck!

It did this:

 $(".minus").click(function() { var num = $(this).parent().index() + 1; $("#table td:nth-child("+ num +"),th:nth-child("+ num +")").fadeOut(250); }); 

It seems that just after figuring out, Jeroen did it right. :) The only thing I don't get is why you need ("th") to work with and without. Thanks!

Answer 1

It seems you are almost at the end. What you can do is wrap it in a function and attach an event handler to the button in the table header cell:

 $("th .button").click(function(){ var num = $(this).parents("th").index(); // untested, but something like this should do it $("#table td:nth-child("+ num +"),th:nth-child("+ num +")").hide(); return false; } 

Answer 2

How about this?

 // note the class for multiple minus $(".minus").click(function () { var $this = $(this); var index = $('.minus').index($this); // get the zero based index of this element index++; // adjust for zero based index var selector = '#table td:nth-child(' + index + '), the:nth-child(' + index + ')'; $(selector).hide(); }); 

Unconfirmed and feel free to omit the code as you wish.