Toggle hide/show <tr> using jQuery

Question

I have this code to show <tr> in my table but with every click, it hides the textbox that must be shown when the button is clicked.

Below is my jQuery code to show the textbox:

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

And this is my 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>

Answer 1

You have invalid markup. You need to wrap tr in table.something like 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 would be:

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

Working Demo

Answer 2

It will help you

$(function() {
    $('#btnAdd').click(function() {
        $('.td1').toggle();
    });
});

HTML

<button id="btnAdd" name="btnAdd" class="span1">ADD</button>
<table>
<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>
</table>

Demo