如何实现点击按钮根据td单元格值动态修改表格行背景色

核心逻辑调整点：

• 移除原代码硬编码固定行ID的逻辑，点击按钮时自动定位到按钮所属的当前表格行
• 读取当前行「Wartosc Netto」列的单元格内容，转换为数值后判断是否大于1000
• 满足判断条件时才给对应行设置背景色，不满足条件可选择还原默认背景
• 逻辑支持复用，后续新增表格行不需要单独加ID或绑定事件

JavaScript 逻辑 #

替换原有的setColor函数即可：

function setColor(triggerBtn, targetColor) {
  // 向上查找当前按钮所在的表格行
  const currentRow = triggerBtn.closest('tr');
  // Wartosc Netto 为第7列，单元格索引从0开始计数，因此取索引为6的td
  const nettoCell = currentRow.querySelectorAll('td')[6];
  // 提取单元格内容，清除空格、替换逗号为小数点后转数字，兼容不同格式的数值写法
  const nettoValue = Number(
    nettoCell.textContent.trim().replace(/\s+/g, '').replace(',', '.')
  );

  // 数值有效且大于1000时设置背景色，否则还原默认背景
  if (!isNaN(nettoValue) && nettoValue > 1000) {
    currentRow.style.backgroundColor = targetColor;
  } else {
    currentRow.style.backgroundColor = '';
  }
}

可选：全局按钮批量处理逻辑 #

如果需要点击单个全局按钮，一次性给所有符合条件的行上色，可以新增以下函数：

function setAllMatchRowColor(targetColor) {
  const allTableRows = document.querySelectorAll('.button-box3 tbody tr');
  allTableRows.forEach(row => {
    const nettoCell = row.querySelectorAll('td')[6];
    const nettoValue = Number(
      nettoCell.textContent.trim().replace(/\s+/g, '').replace(',', '.')
    );
    if (!isNaN(nettoValue) && nettoValue > 1000) {
      row.style.backgroundColor = targetColor;
    } else {
      row.style.backgroundColor = '';
    }
  })
}

HTML 调整 #

只需要修改行内按钮的onclick传参，第一个参数传入this（代表当前被点击的按钮元素）即可，其余结构保持不变，注意补全原代码未闭合的标签：

<table class="button-box3">
  <thead>
    <tr>
      <th>vatId</th>
      <th>Desc</th>
      <th>MPK</th>
      <th>Quantity</th>
      <th>Vat</th>
      <th>Kwota Brutto</th>
      <th>Wartosc Netto</th>
      <th>Wartosc Brutto</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr id="vatek" class="active-row">
      <td>1</td>
      <td>xx</td>
      <td>Stychurski</td>
      <td>Manager</td>
      <td>21.04.2020</td>
      <td>20</td>
      <td>2022</td>
      <td>20</td>
      <td>
        <!-- 仅修改此处onclick传参 -->
        <a href="#" type="button" class="submit-btn3" onclick="setColor(this, '#e47911')">Change</a>
      </td>
    </tr>
    <!-- 后续新增同结构表格行无需额外加ID，直接复用按钮逻辑即可 -->
  </tbody>
</table>

如果使用全局批量处理按钮，直接在按钮上绑定onclick="setAllMatchRowColor('#e47911')"即可，不需要放在表格行内。

CSS 样式 #

原有样式可直接保留，可选增加行背景过渡效果提升交互体验：

#button1 {
  background-color: #e47911;
}
/* 可选新增 */
.button-box3 tbody tr {
  transition: background-color 0.2s ease;
}

• 单元格索引从0开始计数，如果后续调整表格列顺序，需要同步修改querySelectorAll('td')[6]中的索引值，确保取到「Wartosc Netto」对应的单元格
• 数值转换逻辑做了兼容处理，支持带千分位空格、逗号小数点的数值格式，避免转换失败出现NaN
• 基于closest的行定位方式兼容性好，不会因为单元格内嵌套其他元素导致定位失效

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