javascript - 使用 jQuery 切换隐藏/显示 <tr>

Question

我有这段代码可以显示 <tr>在我的表格中，但每次单击时，它都会隐藏单击按钮时必须显示的文本框。

下面是我的jQuery显示文本框的代码:

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

这是我在 <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

您的标记无效。您需要将 tr 包装在 table.something 中，如下所示:

<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>

而 js 将是:

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

Working Demo