使用 jQuery 隐藏表格行答案

【问题标题】：Hiding Table Rows with jQuery使用 jQuery 隐藏表格行
【发布时间】：2017-11-05 19:18:11
【问题描述】：

我正在尝试使用 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

我不知道为什么它不会隐藏点击时的行，我已经在一个包含多个行的表上进行了测试，这些行具有类 service-header，但没有任何运气。

【问题讨论】：

e 未在事件处理程序 hideButton() 中定义。您还将在每次单击元素时附加一个新的 click 事件。 while 循环的目的是什么？
也发布 HTML ..也可以定义点击函数或在事件处理程序上使用，但不能同时使用
你也可以html标记
@guest271314 这是一个表，其中包含某些部分的标题，然后是该部分下的信息，然后是另一个标题，所以我希望能够隐藏没有“服务标头”类。该表是自动构建的，所以我有多个按钮需要隐藏它们下面的信息。你是说我只需要将 hideButton() 更改为 hideButton(e) 还是我还需要更改 onclick='hideButton()' 部分中的 html？感谢您的快速回复。
您可以在问题中包含html 吗？见stackoverflow.com/help/mcve

标签： javascript php jquery html html-table

【解决方案1】：

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

$(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();
     }
});

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

【讨论】：

【解决方案2】：

这里有一些建议让这项工作发挥作用。

hideButton() 和 $("#showHideButton").on("click"...... 两者都在做同样的事情（初始化点击功能）。所以我建议从你的代码。

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

如果仍然无法正常工作，请检查您的 HTML 结构。

在这些更改之后尝试。希望这会有所帮助。

【讨论】：