Javascript 添加表会停止js显示/隐藏的工作

我在网页上有一个show/hide函数，我想在其中改进布局，但是当我添加了一个新表以放入数据的标题时，show/hide停止了工作

原始代码的一个片段是：

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

var-groups=document.getElementsByClassName（“cl-sh”）；
if（组）{
对于（变量i=0；i

这里可以看到小提琴：

此处可以看到添加了附加表代码的中断函数：

我真的不明白为什么增加一个表会破坏函数

---

对此有什么建议吗？

当您单击+/-单元格时，JS函数会做什么

首先，它切换单击的单元格是否包含

cl-a

类。然后，它运行同一个表中所有剩余的行，根据需要显示或隐藏它们，直到找到一个具有class

cl group

的行，或者到达该表中的行的末尾

注意最后一段中的同一个词

在你的第一把小提琴中，你有一张桌子。在第二个提琴中，您有两个，并且您希望切换显示的行与切换按钮不在同一个表中。这就是为什么单击“切换”按钮时它们不显示/隐藏的原因

---

我不确定显示/隐藏行的具体要求，所以我不打算提出修复方案。然而，了解问题所在可能有助于你自己找到解决办法。

@Roy与div无关。即使将它们完全移除，也不起作用。请参阅@LukeThanks以了解其运行过程的解释。本质上我希望它以相同的方式执行，只是它将隐藏第二个表的内容。@Stephen3071:在这种情况下，最简单的方法可能是在第二个表上放置一个

id

，并替换行

var nextRow=this.parentNode.nextElementSibling

with

var nextRow=document.getElementById（“此处为您的表id”）.tBodies[0]。行[0]。