Question

我试图使用javascript隐藏一堆表行。我认为我的大部分代码都是正确的，我只是不知道它为什么不运行隐藏。

感谢任何帮助。

代码是：

<script type="text/javascript">
    function hideButton()
    {
    $("#showHideButton").on("click", function (e) {
    var button = e.target;
    var node = $(button).parent().parent().next();

    while (!node.hasClass("service-header")) {
        if ($(node).is(":visible")) {
            $(node).hide();
        } else {
            $(node).show();
        }
        node = node.next();
    }
    })}
    </script>

HTML是：

for (loopHere) 
{
    echo "<tr class='service-header'><th>InfoHere</th><th>" . InfoHere . "<button style='float:right' type='button' id='showHideButton' class='btn btn-default' onclick='hideButton()'><span class='dashicons dashicons-arrow-down-alt2'></span></button></th></tr>"; 
    echo "<tr><td>More Stuff</td></tr>"; 
    echo "<tr><td>More Stuff</td></tr>";
}
loop

我不知道为什么它不能隐藏点击的行，我已经在一个有多行的表上测试了它，这些行有类服务标题，但是没有好运。

Answer 1

根据您在下面创建的要求，参考下面的代码。希望它能解决您的问题

＆＃13;

$(document).on("click", ".showHideButton",function () {
debugger;
//console.log("this="+this+" && $(this)="+$(this));
if($(this).parent().parent().hasClass("service-header") && $(this).parent().parent().is(":visible")){
     $(this).parent().parent().hide();
     }
     else{
       $(this).parent().parent().show();
     }
});

＆＃13;

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<table border="1">
  <tr class="service-header">
      <td>1 (has class)</td>
      <td>1 (has class)</td>
      <td><button  type='button'  class='showHideButton btn btn-default'>show/hide</button></td>
   </tr>
   <tr>
      <td>2</td>
      <td>2</td>
      <td><button  type='button'  class='showHideButton btn btn-default'>show/hide</button></td>
   </tr>
   <tr class="service-header">
      <td>3 (has class)</td>
      <td>3 (has class)</td>
      <td><button  type='button'  class='showHideButton btn btn-default'>show/hide</button></td>
       <tr class="service-header">
      <td>4 (has class)</td>
      <td>4 (has class)</td>
      <td><button  type='button'  class='showHideButton btn btn-default'>show/hide</button></td>
   </tr>
   <tr>
      <td>5 </td>
      <td>5</td>
      <td><button  type='button'  class='showHideButton btn btn-default'>show/hide</button></td>
   </tr>
</table>

＆＃13;

Answer 2

以下是使这项工作的一些建议。

hideButton（）和$（“＃showHideButton”）。on（“click”......两者都在做同样的事情（初始化点击功能）。所以我建议删除函数hideButton（）{}你的代码。

现在，您的ID“#showHideButton”在单个网页中必须是唯一的。

如果仍然无效，请检查您的HTML结构。

尝试完成这些更改。希望这会有所帮助。

使用jQuery隐藏表行

2 个答案: