本文介绍如何通过纯 javascript 实现点击按钮后，根据指定列（如“wartosc netto”）的数值自动为对应表格行设置不同背景色，例如数值大于 1000 时设为橙色，否则设为绿色。
本文介绍如何通过纯 javascript 实现点击按钮后，根据指定列（如“wartosc netto”）的数值自动为对应表格行设置不同背景色，例如数值大于 1000 时设为橙色，否则设为绿色。
在实际业务场景中，常需根据表格数据动态高亮关键行（如金额超限、状态异常等）。本文提供一个轻量、可复用的 Vanilla JS 方案，无需依赖 jQuery 或框架，兼容现代浏览器。
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
✅ 核心思路
- 为每行的“Action”列中的按钮绑定统一事件监听器；
- 点击时，向上定位到当前 <tr> 元素；
- 定位该行中目标 <td>（本例为第 7 列，即索引 6 的“Wartosc Netto”）；
- 解析其文本内容为数字，并与阈值（如 1000）比较；
- 根据判断结果，动态设置整行背景色。
? 示例代码（完整可运行）
<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 class="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><a href="#" class="submit-btn3">Change</a></td>
</tr>
<tr class="row">
<td>2</td>
<td>yy</td>
<td>Kowalski</td>
<td>Developer</td>
<td>22.04.2020</td>
<td>15</td>
<td>100</td>
<td>18</td>
<td><a href="#" class="submit-btn3">Change</a></td>
</tr>
<tr class="row">
<td>3</td>
<td>zz</td>
<td>Nowak</td>
<td>Analyst</td>
<td>23.04.2020</td>
<td>25</td>
<td>3000</td>
<td>32</td>
<td><a href="#" class="submit-btn3">Change</a></td>
</tr>
</tbody>
</table>
<script>
function setColor(e) {
e.preventDefault(); // 阻止 a 标签默认跳转行为
const colors = ['#e47911', '#4CAF50']; // >1000 → 橙色；≤1000 → 绿色
const targetTd = e.target.closest('tr').cells[6]; // 第7列（索引6），即"Wartosc Netto"
const value = parseFloat(targetTd.textContent.trim()) || 0;
const currentRow = e.target.closest('tr');
currentRow.style.backgroundColor = value > 1000 ? colors[0] : colors[1];
}
// 批量绑定事件（推荐使用 event delegation 更优，此处为清晰演示）
document.querySelectorAll('.submit-btn3').forEach(btn =>
btn.addEventListener('click', setColor)
);
</script>⚠️ 注意事项
- 列索引校验：cells[6] 表示第 7 列（从 0 开始计数），请确保 HTML 结构中“Wartosc Netto”始终位于该位置；若列序变动，需同步调整索引。
- 数值安全解析：使用 parseFloat() 并提供默认值 || 0，避免空值、非数字字符串导致 NaN 异常。
-
样式覆盖优先级：直接操作 style.backgroundColor 会覆盖 CSS 类定义的背景色；如需保留原有类样式（如 hover 效果），建议改用 classList.add/remove 配合 CSS 类控制，例如：
.row.high-value { background-color: #e47911 !important; } .row.normal-value { background-color: #4CAF50 !important; } -
性能优化建议：对于大型表格（>100 行），推荐使用事件委托（event delegation）替代 forEach 绑定，提升初始化性能：
document.querySelector('tbody').addEventListener('click', e => { if (e.target.classList.contains('submit-btn3')) setColor(e); });
通过以上方案，你可快速实现基于数据驱动的行级视觉反馈，增强表格信息可读性与交互体验。
