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;/* 可选：防止边框塌陷 */}</style>2. 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 动态控制且无法预知样式的场景下使用。性能稍差，且代码较冗长。
建议使用方案一，它能一劳永逸地解决样式优先级问题，并且代码非常简洁。
