通过复选框切换表格行列内容字体颜色的实现方案咨询

我来给你分享一个实用的实现方案，完全能满足你想要的通过表格顶部/左侧复选框切换对应行列内容字体颜色的需求，而且支持多行列同时勾选，不会互相冲突～

1. HTML 结构 #

首先我们先搭建基础的表格结构，顶部放列对应的复选框，左侧放行对应的复选框，表格内容用标准的<table>标签实现：

<div class="table-container">
  <!-- 列复选框行 -->
  <div class="col-checkboxes">
    <span></span> <!-- 占位，对齐左侧行复选框 -->
    <input type="checkbox" data-col="0" id="col-0">
    <label for="col-0">列1</label>
    <input type="checkbox" data-col="1" id="col-1">
    <label for="col-1">列2</label>
    <input type="checkbox" data-col="2" id="col-2">
    <label for="col-2">列3</label>
  </div>

  <!-- 表格主体 -->
  <table>
    <tbody>
      <!-- 第一行 -->
      <tr>
        <td class="row-checkbox-cell">
          <input type="checkbox" data-row="0" id="row-0">
          <label for="row-0">行1</label>
        </td>
        <td>内容1-1</td>
        <td>内容1-2</td>
        <td>内容1-3</td>
      </tr>
      <!-- 第二行 -->
      <tr>
        <td class="row-checkbox-cell">
          <input type="checkbox" data-row="1" id="row-1">
          <label for="row-1">行2</label>
        </td>
        <td>内容2-1</td>
        <td>内容2-2</td>
        <td>内容2-3</td>
      </tr>
      <!-- 第三行 -->
      <tr>
        <td class="row-checkbox-cell">
          <input type="checkbox" data-row="2" id="row-2">
          <label for="row-2">行3</label>
        </td>
        <td>内容3-1</td>
        <td>内容3-2</td>
        <td>内容3-3</td>
      </tr>
    </tbody>
  </table>
</div>

2. CSS 样式 #

接下来定义样式，包括表格的基础样式，以及选中后字体颜色的样式（这里我用了深蓝色作为示例，你可以随便修改）：

.table-container {
  margin: 20px;
}

.col-checkboxes {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.col-checkboxes span {
  width: 80px; /* 和左侧行复选框单元格宽度一致 */
}

.col-checkboxes input {
  margin: 0 4px 0 12px;
}

table {
  border-collapse: collapse;
  width: auto;
}

td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  transition: color 0.2s;
}

.row-checkbox-cell {
  width: 80px;
  text-align: center;
  background-color: #f5f5f5;
}

/* 行选中后的字体颜色 */
.row-highlight {
  color: #1a73e8;
}

/* 列选中后的字体颜色 */
.col-highlight {
  color: #1a73e8;
}

3. JavaScript 逻辑 #

核心逻辑在这里，我们通过监听复选框的点击事件，给对应的行/列单元格添加/移除高亮类名，这样就能实现字体颜色的切换，而且多行列勾选时，类名叠加不会冲突（要是想给不同行列设置不同颜色，只需要修改对应CSS类的颜色值就行）：

// 获取所有行复选框
const rowCheckboxes = document.querySelectorAll('[data-row]');
// 获取所有列复选框
const colCheckboxes = document.querySelectorAll('[data-col]');
// 获取表格所有行
const tableRows = document.querySelectorAll('table tbody tr');

// 行复选框点击事件
rowCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const rowIndex = this.dataset.row;
    const rowCells = tableRows[rowIndex].querySelectorAll('td:not(.row-checkbox-cell)');
    
    rowCells.forEach(cell => {
      cell.classList.toggle('row-highlight', this.checked);
    });
  });
});

// 列复选框点击事件
colCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const colIndex = this.dataset.col;
    
    tableRows.forEach(row => {
      const cell = row.querySelectorAll('td')[parseInt(colIndex) + 1]; // +1 跳过左侧行复选框单元格
      cell.classList.toggle('col-highlight', this.checked);
    });
  });
});

方案说明 #

• 我特意用了类名控制样式的方式，而不是直接操作元素的style属性，这样后续要修改颜色或者其他样式，只需要调整CSS就行，不用动JS代码，维护起来更省心。
• 支持同时勾选多个行和列，因为类名是独立添加/移除的，不会互相覆盖或者冲突。
• 代码里的data-row和data-col属性用来标记对应的行/列索引，逻辑清晰，容易扩展（比如新增行/列只需要对应增加复选框和表格行/列就行）。

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