本文介绍如何使用原生JavaScript遍历所有具有指定类名（如 last_value_row）的 元素，并根据其首列 是否精确包含文本 “New Target” 动态添加或切换 CSS 类（如 new_target_color），解决仅首行生效的常见问题。
本文介绍如何使用原生javascript遍历所有具有指定类名（如 `last_value_row`）的 `
在实际开发中，尤其是基于 Django 模板渲染的动态表格中，常需根据单元格内容为整行设置视觉样式（如高亮新目标行）。但若错误地依赖 document.getElementById("last_value_row")，则仅能操作首个匹配元素——因为 ID 在 DOM 中必须唯一，重复 ID 会导致 getElementById 始终返回第一个匹配项，后续行将被忽略。
正确做法是按 class 选择全部目标行，再逐行判断并更新类名。以下为推荐实现方案：
✅ 正确的 JavaScript 实现（原生，无 jQuery 依赖）
// 1. 获取所有具有 'last_value_row' 类的表格行（支持多行）
const lastValueRows = document.querySelectorAll('.last_value_row');
// 2. 定义更新单行样式的函数
function updateRowClasses(row) {
// 安全获取首列 td 的纯文本内容（避免空格/换行干扰）
const firstCellText = row.cells[0]?.textContent?.trim() || '';
// 精确匹配 "New Target"（注意大小写与空格）
const isMatch = firstCellText === 'New Target';
if (isMatch) {
row.classList.add('new_target_color');
row.classList.remove('target_background_color');
} else {
row.classList.remove('new_target_color');
row.classList.add('target_background_color');
}
}
// 3. 遍历所有匹配行并应用逻辑
lastValueRows.forEach(updateRowClasses);⚠️ 关键注意事项
-
ID vs Class：HTML 中
id="last_value_row"不应重复出现；若存在多行，务必改用class="last_value_row"并通过querySelectorAll选取。 -
文本匹配精度：使用
.textContent.trim()而非:contains()（jQuery 方法，且模糊匹配易误判），确保严格等于"New Target"，避免"New Target "或"New target"等干扰。 -
DOM 就绪时机：请确保脚本在表格 DOM 渲染完成后执行（例如包裹在
DOMContentLoaded事件中，或置于
