如何优化按钮切换表格列CSS样式/显示状态的JS实现？

原始结构说明 #

HTML表格 #

<table>
  <tr>
    <th class="street">Street</th>
    <th class="city">City</th>
    <th class="country">Country</th>
  </tr>
  <tr>
    <td class="street">street-1</td>
    <td class="city">city-1</td>
    <td class="country">country-1</td>
  </tr>
  <tr>
    <td class="street">street-2</td>
    <td class="city">city-2</td>
    <td class="country">country-2</td>
  </tr>
</table>

控制按钮 #

<button id="button_street">TOGGLE STREET</button>
<button id="button_city">TOGGLE CITY</button>
<button id="button_country">TOGGLE COUNTRY</button>

优化方案解答 #

1. 更高效的元素选择方法 #

原始代码使用getElementsByClassName，推荐改用document.querySelectorAll——它返回静态NodeList，支持直接调用forEach遍历元素，无需手动编写for循环，代码更简洁易读：

// 示例：选中所有.street类元素并切换样式
document.querySelectorAll('.street').forEach(element => {
  element.classList.toggle('street_design2');
});

2. 用数组循环实现通用逻辑，避免重复代码 #

通过定义列类型数组，循环为每个按钮绑定统一的点击事件，彻底消除重复代码：

步骤1：统一CSS样式

如果是切换样式，无需为每个列单独定义_design2类，用一个通用类即可；如果是隐藏列，单独定义隐藏类：

/* 默认列样式 */
.street, .city, .country {
  background-color: blue;
}
/* 通用高亮样式 */
.column-highlight {
  background-color: red !important;
}
/* 列隐藏样式 */
.column-hidden {
  display: none;
}

步骤2：通用JavaScript逻辑

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 定义所有列类型数组
  const columnTypes = ["street", "city", "country"];

  columnTypes.forEach(type => {
    // 获取对应按钮
    const button = document.getElementById(`button_${type}`);
    // 绑定点击事件
    button.addEventListener('click', function() {
      // 选中当前列的所有表头和单元格
      const elements = document.querySelectorAll(`.${type}`);
      // 切换样式（若要隐藏列，把'column-highlight'换成'column-hidden'即可）
      elements.forEach(el => el.classList.toggle('column-highlight'));
    });
  });
});

这种方式的优势：

• 新增列时，只需在数组中添加列类型，无需额外编写JS代码
• 所有按钮共用同一套逻辑，维护成本大幅降低

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