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

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -