如何精准定位行数超10的单个表格进行操作？

我明白你的问题啦——现在点击按钮时，所有表格都会被影响，哪怕是中间行数不够的那个，核心原因是你修改了全局的CSS规则，而且用index === 0来定位表格的方式太局限，没法精准控制每个符合条件的表格。咱们可以通过以下调整来解决：

核心思路 #

1. 给每个行数超10的表格单独维护展开/折叠状态，不再用全局的counters变量
2. 为每个目标表格创建独立的CSS规则，避免影响其他表格
3. 让按钮知道自己对应哪个表格，点击时只操作目标表格的规则

修改后的完整代码 #

JavaScript 代码 #

/* ========================================================================== 
ShowDebug constructor 
========================================================================== */ 
var ShowDebug = function () {
  this.tables = document.querySelectorAll('.tbl_List');
  // 为每个表格维护独立的状态：记录max值、总行数和对应的CSS规则索引
  this.tableStates = [];
  this.appendElements();
}

/* ========================================================================== 
ShowDebug Inherited methods 
========================================================================== */ 
ShowDebug.prototype = {
  // 创建收缩按钮，传入表格索引用于定位
  createLessBtn(tableIndex) {
    var lessBtn = document.createElement("button");
    lessBtn.className = "btn";
    lessBtn.textContent = "Less";
    // 绑定点击事件时传入表格索引
    lessBtn.addEventListener('click', () => this.showLess(tableIndex));
    return lessBtn;
  },
  // 创建展开按钮，传入表格索引用于定位
  createMoreBtn(tableIndex) {
    var moreBtn = document.createElement("button");
    moreBtn.className = "btn";
    moreBtn.textContent = "More";
    moreBtn.addEventListener('click', () => this.showMore(tableIndex));
    return moreBtn;
  },
  // 为符合条件的表格添加元素和初始化状态
  appendElements() {
    this.tables.forEach((table, index) => {
      const rowCount = table.children[0].childElementCount;
      if (rowCount > 10) {
        // 初始化该表格的状态：初始max为5，总条数为rowCount
        this.tableStates[index] = {
          min: 1,
          max: 5,
          totalRows: rowCount
        };

        // 创建计数器元素
        let itemCounter = document.createElement('span');
        itemCounter.className = "item-counter";
        itemCounter.innerHTML = ` 1 - 5 of ${rowCount} items`;
        table.children[0].appendChild(itemCounter);

        // 添加按钮，传入当前表格索引
        table.children[0].appendChild(this.createLessBtn(index));
        table.children[0].appendChild(this.createMoreBtn(index));

        // 为当前表格创建独立的CSS规则
        const styleSheet = document.styleSheets[0];
        const selector = `.tbl_List:nth-of-type(${index + 1}) tr:nth-of-type(${this.tableStates[index].min}n+${this.tableStates[index].max})`;
        styleSheet.insertRule(`${selector} { display: none; }`, styleSheet.cssRules.length);
        // 把规则索引存到状态里，方便后续修改
        this.tableStates[index].ruleIndex = styleSheet.cssRules.length - 1;
      }
    });
  },
  // 收缩指定表格的行
  showLess(tableIndex) {
    const state = this.tableStates[tableIndex];
    if (!state) return;

    // 限制最小显示行数为5，避免过度收缩
    if (state.max > 5) {
      state.max -= 5;
      const styleSheet = document.styleSheets[0];
      const rule = styleSheet.cssRules[state.ruleIndex];
      // 更新当前表格的CSS规则
      rule.selectorText = `.tbl_List:nth-of-type(${tableIndex + 1}) tr:nth-of-type(${state.min}n+${state.max})`;
      // 更新计数器文本
      const counter = this.tables[tableIndex].querySelector('.item-counter');
      counter.innerHTML = ` 1 - ${state.max - 1} of ${state.totalRows} items`;
    }
  },
  // 展开指定表格的行
  showMore(tableIndex) {
    const state = this.tableStates[tableIndex];
    if (!state) return;

    // 限制最大显示行数为总行数，避免过度展开
    if (state.max <= state.totalRows) {
      state.max += 5;
      // 超过总行数时，直接显示全部
      if (state.max > state.totalRows) {
        state.max = state.totalRows + 1;
      }
      const styleSheet = document.styleSheets[0];
      const rule = styleSheet.cssRules[state.ruleIndex];
      rule.selectorText = `.tbl_List:nth-of-type(${tableIndex + 1}) tr:nth-of-type(${state.min}n+${state.max})`;
      // 更新计数器文本
      const counter = this.tables[tableIndex].querySelector('.item-counter');
      const displayCount = state.max - 1 > state.totalRows ? state.totalRows : state.max - 1;
      counter.innerHTML = ` 1 - ${displayCount} of ${state.totalRows} items`;
    }
  }
}

var showDebug = new ShowDebug();

CSS 代码 #

table {
  width: 100%;
}
.btn {
  margin-left: 10px;
  cursor: pointer;
}
.item-counter {
  margin-right: 10px;
}

关键调整说明 #

1. 独立状态管理：用tableStates数组为每个符合条件的表格单独存储max、totalRows和对应的CSS规则索引，避免全局变量的干扰。
2. 精准的CSS规则：给每个目标表格创建唯一的CSS选择器（.tbl_List:nth-of-type(${index + 1})），修改规则时只会影响对应的表格。
3. 按钮绑定索引：创建按钮时传入表格索引，点击事件直接定位到目标表格，不再依赖全局的index === 0判断。
4. 计数器动态更新：每次展开/收缩时，同步更新表格的计数器文本，让用户清楚当前显示的行数。

这样调整后，点击某个表格的按钮时，只会操作该表格的行显示状态，不会影响其他表格啦～

内容的提问来源于stack exchange，提问作者Edwards