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

您的标记无效。你需要在table.something中包装tr：

<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

Answer 2

它会帮助你

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

Answer 3

默认情况下，您需要隐藏元素以使show()方法有效：

.td1 {
    display: none;
}

<强> Fiddle Demo

或者您可以在此处使用 toggle() ：

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

<强> Fiddle Demo

Answer 4

希望对你有所帮助。

您可以看到我的Example

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

Answer 5

添加按钮，如：

            <td>
                <button id="btnAdd" name="btnAdd">ADD</button>
            </td>

和Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#btnAdd").click(function () {
            $('.td1').toggle();
        });
    });
</script>

使用jQuery切换hide / show

5 个答案: