本文介绍如何使用原生JavaScript遍历所有具有指定类名（如 last_value_row）的 元素，并根据其首列 是否精确包含文本 “New Target” 动态添加或切换 CSS 类（如 new_target_color），解决仅首行生效的常见问题。 本文介绍如何使用原生JavaScript遍历所有具有指定类名（如 `last_value_row`）的 `` 元素，并根据其首列 `` 是否精确包含文本 “New Target” 动态添加或切换 CSS 类（如 `new_target_color`），解决仅首行生效的常见问题。在实际开发中，尤其是基于 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 事件中，或置于 底部）：document.addEventListener('DOMContentLoaded', () => { // 上述代码放在此处 });动态更新支持：若表格内容后续通过 JS 修改（如用户输入后重设首列文本），可将 updateRowClasses 封装为独立函数，在需要时重新调用。? 补充：配合 CSS 示例.new_target_color { background-color: #d4edda !important; border-left: 4px solid #28a745; } .target_background_color { background-color: #f8f9fa; }通过以上结构化处理，即可确保每一行 last_value_row 都能独立响应其首列内容变化，实现精准、可维护、符合 Web 标准的样式控制。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！