Javascript 切换隐藏/显示<；tr>；使用jQuery

我的表中显示了此代码

，但每次单击时，它都会隐藏单击按钮时必须显示的文本框

下面是我的

jQuery

代码，用于显示文本框：

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

这是我在

中的代码：

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

添加

它将帮助您

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

HTML

添加

---

默认情况下，您需要隐藏元素以使

show（）

方法工作：

.td1 {
    display: none;
}

或者您可以在此处使用：

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

---

您的标记无效。您需要将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>

希望这对你有帮助

你可以看到我的

添加按钮，如下所示：

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

$（文档）.ready（函数（）{
$（“#btnAdd”）。单击（函数（）{
$（'.td1'）.toggle（）；
});
});

您需要先应用

display:none

才能使其显示，hidei已经将display:none放入样式中，但仍然没有任何结果在css中，您有

.td1{display:none}

，还要确保jquery脚本正常工作..是的，我有.td{display:none}，我也尝试了jquery，如果它正常工作，我会用警报测试它，它会正常工作。我的问题是每次我点击btnAdd，它就像刷新我的页面一样，没有显示文本框谢谢你们，我已经修复了它。我检查了我的代码，发现我的ajax和jquery$（document）.ready（function（）{$（'#btnAdd'）中存在冲突。单击（function（）{$.ajax（{type:'post'，url:'+'/index.php/datacast\u ctr/add'，数据：{}，success:function（data）{$（'.td1'）.html（data）；}}}）；}）；感谢您的回复，我将再次尝试并对结果进行评论：）如果您想在输入的显示和隐藏之间切换，请使用此选项：我已经尝试过了，但它就像在我的页面中刷新一样，而不是切换文本框添加

e.preventDefault（）

到您的单击功能。检查我的更新谢谢你的回复，我试过了，但是没有用。它只是隐藏了“tr”并且在我点击btnAddi时不再显示它。我已经尝试过了，但它只是隐藏了文本框，而不会切换回显示文本框again@bebebe请检查我的演示文稿是否缺少

表

标记

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

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

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