jQuery 获取 class 等于 abc 的 table 元素，获取到 table 以后，设置第三列和第七列边框为红色，使用 jQuery 设置内联样式

jQuery 获取 class 等于 abc 的 table 元素获取到 table 以后设置第三列和第七列边框为红色使用 jQuery 设置内联样式针对“多个表格”以及“样式被覆盖”的问题之前的逐行遍历方式效率较低。我们可以利用CSS 类来管理样式这是解决优先级冲突最优雅且高效的方法。推荐方案添加 CSS 类最佳实践这种方法不仅性能更好浏览器原生处理样式而且能轻松解决优先级问题。1. 先在 CSS 中定义样式在head中的style标签或 CSS 文件里添加style/* 定义第三列和第七列的样式 */.table-abc-highlight tbody tr *:nth-child(3), .table-abc-highlight tbody tr *:nth-child(7){border:2px solid red!important;/* 使用 !important 确保覆盖原有样式 */padding:5px;/* 可选防止边框塌陷 */}/style2. jQuery 代码批量处理$(document).ready(function(){// 1. 找到所有 class 包含 abc 的 table// 2. 给它们添加一个新的 class table-abc-highlight$(table.abc).addClass(table-abc-highlight);// 3. (可选) 如果表格有 thead 或 tfoot上面的 CSS 只针对 tbody// 如果需要包含表头可以使用这个更通用的选择器// $(table.abc).find(tr).find(td, th).removeClass(highlight-col);// $(table.abc).find(tr).find(td:nth-child(3), th:nth-child(3), td:nth-child(7), th:nth-child(7)).addClass(highlight-col);});备选方案强制内联样式如果必须用 JS如果你无法修改 CSS 文件必须使用 jQuery 内联样式可以使用attr(style, ...)来强制覆盖。$(document).ready(function(){// 遍历每一个 class 为 abc 的 table$(table.abc).each(function(){var$table$(this);// 遍历该表格下的每一行$table.find(tr).each(function(){// 使用 attr 直接写入 style 属性并包含 !important// 第三列 (索引2)$(this).find(td, th).eq(2).attr(style,border: 2px solid red !important;);// 第七列 (索引6)$(this).find(td, th).eq(6).attr(style,border: 2px solid red !important;);});});});方案对比与建议方案一addClass强烈推荐。性能高代码清晰维护方便。通过 CSS 类管理样式是前端标准做法。方案二attr style在必须通过 JS 动态控制且无法预知样式的场景下使用。性能稍差且代码较冗长。建议使用方案一它能一劳永逸地解决样式优先级问题并且代码非常简洁。