javascript - 使用 jQuery 隐藏表行

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

我不知道为什么它不会隐藏点击时的行，我已经在具有类服务 header 的多行表上对其进行了测试，但没有任何运气。

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