当前位置：首页 > news >正文

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

news 2026/3/27 5:09:48

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;');});});});