Attempting to hide a column of a html table using jQuery -
function func(id) { $(document).ready(function () { $(".toggle").click(function () { $("td:nth-child(" + id + ")>div").toggle(); }); }); return false; }
am attempting hide column corresponding button clicked. code gets unexpected output both columns hiding when 1 button clicked. going wrong?
<table border="1"> <tr> <th><button class="toggle" id="1" onclick="return func(this.id);" >hide</button></th> <th><button class="toggle" id="2" onclick="return func(this.id);" >hide</button></th> </tr> <tr> <td> <div>row 1, cell 1</div></td> <td><div>row 1, cell 2</div></td> </tr> <tr> <td><div>row 2, cell 1</div></td> <td> <div>row 2, cell 2</div></td> </tr> </table>
you don't need onclick on html call function.
in jquery have:
$("#1,#2").click(function(){ $(this).find("td").hide(); });
edit:
this 1 without resorting giving id names 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 actual fiddle.
Comments
Post a Comment