Attempting To Hide A Column Of A Html Table Using Jquery

function func(id) { $(document).ready(function () { $('.toggle').click(function () { $('td:nth-child(' + id + ')>

Solution 1:

An easier way to do this is to add a class to your columns td. I added class col1 and col2 to each of your td's.

Fiddle: http://jsfiddle.net/tbpMX/

Code:

$(".toggle").click(function() {
    $(this).parent().hide();
    $(".col" + $(this).attr("id")).hide();
});

Solution 2:

You don't need onclick on your html to call the function.

In your jquery you could have:

$("#1,#2").click(function(){
$(this).find("td").hide();
});

Edit:

This one without resorting to giving id names to column:

$(document).ready(function(){
$("#1,#2").click(function(){
    var colid=$(this).prop("id");
    $("tr").children().each(function(){
        if (colid==1)
        {
           $(this).closest("td:nth-child(1),th:nth-child(1)").hide();                
        }
        else
        {
            $(this).closest("td:last-child,th:last-child").hide();
        }

    });
});

});

Here's the actual fiddle.