javascript - 添加表格会阻止 js show/hide 工作

Question

我在网页上有一个显示/隐藏功能，我想改进布局，但是当我添加一个新表格来放入数据标题时，显示/隐藏功能停止工作。

原始代码片段是:

<table id="cart-list">
  <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
    <tr class="cl-group">
      <td class="cl-sh" title="Show [+] or Hide [-] this lists' products">&nbsp;</td>
      <td colspan="2">Cart List One:
        <table id="cl-chg-1" class="cl-other cl-chg">
          <tr>
            <td>List Name:</td>
            <td><input type="text" name="group_name[1]" value="Cart List One" maxlength="255" /></td>
          </tr>
          <tr>
            <td>List Comments:</td>
            <td><input type="text" name="group_comments[1]" maxlength="255" /></td>
          </tr>
          <tr>
            <td><button type="button" onclick="cancelGroupEdit();">Cancel</button></td>
            <td><button type="submit" name="change" value="1">Go</button></td>
          </tr>
        </table>
      </td>
    </tr>
  </div>
  <tr>
    <td>Stuff Here</td>
  </tr>
  <tr>
    <td>Stuff Here</td>
  </tr>
</table>

使用的js是

var groups = document.getElementsByClassName("cl-sh");
if (groups) {
  for (var i = 0; i < groups.length; i++) {
    groups[i].onclick = function() {
      this.classList.toggle('cl-a');
      var productsDisplay = '';
      if (this.classList.contains('cl-a')) {
        productsDisplay = 'none';
      }

      var nextRow = this.parentNode.nextElementSibling;
      while (nextRow) {
        if (nextRow.classList.contains('cl-group')) {
          break;
        }
        nextRow.style.display = productsDisplay;
        nextRow = nextRow.nextElementSibling;
      }
    }
  }
}

可以在这里看到 fiddle :https://jsfiddle.net/65j1nvpq/1/

可以在此处看到添加了附加表代码的损坏函数:https://jsfiddle.net/cmgqeLf7/

我真的不明白为什么有一个额外的表会破坏功能。

关于修复此问题有什么建议吗？

Answer 1

当你点击 +/- 单元格时，你的 JS 函数会做什么？

首先，它切换单击的单元格是否包含cl-a类。然后，它会遍历同一个表中的所有剩余行，根据需要显示或隐藏它们，直到找到具有 cl-group 类的行，或者到达该表中行的末尾。

请注意最后一段中的“相同”一词。

在你的第一个 fiddle 中，你有一张 table 。在你的第二个 fiddle 中，你有两个，并且你想要切换显示的行与切换按钮不在同一个表中。这就是当您单击切换按钮时它们不显示/隐藏的原因。

我不确定您对显示/隐藏行的具体要求是什么，所以我不会提出修复方案。但是，了解问题所在可能会帮助您找到解决办法。