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

- bebebe

---

我已经在样式中加入了"display: none"，但仍然没有任何反应。 - bebebe

是的，我有使用“.td{display:none}”，我也尝试了jQuery，如果它能正常工作，我会用警报测试它，它确实可以工作。我的问题是每次我点击btnAdd时，它就像刷新我的页面一样，而不显示文本框。 - bebebe

@bebebe 你有没有看到我的更新和演示？比较一下，看看你目前缺少了什么。 - Felix

你能展示完整的 HTML 吗？ - Sarath

谢谢大家，我已经弄好了。我检查了我的代码，发现我的ajax和jquery之间有冲突。$(document).ready(function(){ $('#btnAdd').click(function(){ $.ajax({ type: 'post', url: '<?php echo base_url(); ?>'+'/index.php/datacast_ctr/add', data: {}, success: function(data){ $('.td1').html(data); } }); }); }); - bebebe

Answer 1

您的标记无效。您需要将包装在中，如下所示：

<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

- Milind Anantwar

---

谢谢您的回复，我尝试了但是没有起作用。它只是隐藏了“tr”，当我点击btnAdd时并没有再次显示出来。 - bebebe

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>

演示

- Amit

---

我已经尝试过了，但它只会隐藏文本框，而不能切换回显示文本框。 - bebebe

@bebebe 请查看我的演示 - Amit

您缺少 table 标签。 - Amit

Answer 3

为了让show()方法起作用，您需要默认隐藏您的元素：

.td1 {
    display: none;
}

演示示例

或者你可以在这里使用toggle()：

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

Fiddle Demo

- Felix

---

谢谢你的回复，我会尝试并再次评论结果 :) - bebebe

如果您想切换输入框的显示和隐藏，请使用以下代码：http://jsfiddle.net/hThWV/1/ - Felix

我已经尝试过了，但它只是刷新了我的页面，而没有切换文本框。 - bebebe

在你的点击函数中添加 e.preventDefault()。请检查我的更新。 - Felix

Answer 4

希望这对你有所帮助。

你可以查看我的示例

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

- Tal Shaked

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>

- Tj Laubscher