javascript - Toggle hide/show <tr> using jQuery -

i have code show <tr> in table every click, hides textbox must shown when button clicked.

below jquery code show textbox:

$(function() {    $('#btnadd').click(function() {        $('.td1').show();    }); }); 

and code in <table>:

<button id="btnadd" name="btnadd" onclick="toggle();" class="span1">add</button> <tr class="td1" id="td1" style="">        <td><input type="text" name="val1" id="val1"/></td>      <td><input type="text" name="val2" id="val2"/></td> </tr> 

you have invalid markup. need wrap tr in table.something this:

<button id="btnadd" name="btnadd" class="span1" >add</button> <table class="td1" style="display: block;" > <tr id="td1" >    <td><input type="text" name="val1" id="val1"/></td>  <td><input type="text" name="val2" id="val2"/></td> </tr> </table> 

and js be:

$('#btnadd').on('click', function (e) {     e.preventdefault();     var elem = $(this).next('.td1')     elem.toggle('slow'); }); 

working demo