bebebe bebebe - 7 months ago 58
Javascript Question

Toggle hide/show <tr> using jQuery

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

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