如何使用jquery在bootstrap表中添加类到td标记

Question

我在我的引导表

中使用了以下jquery代码

$(document).ready(function() {
    $('.table>tr>td').addClass('redBg');
    console.log('hg');    
});

我试过这个

$(document).ready(function() {
    $('.table>tbody>tr>td').addClass('redBg');
    console.log('hg');

});

但该课程不会添加到td代码

这是工作小提琴https://jsfiddle.net/udarazz/0vx7tjfq/

有人可以帮我解决这个问题吗？

Answer 1

如果省略它，许多浏览器将隐式添加<tbody>容器来包装所有表行。您可以使用浏览器的开发人员工具/检查程序对其进行验证。结果结构：

<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

这意味着<tr>不再是<table>的直接孩子，而您的table > tr选择器不再适用。

要解决此问题，您可以：

• 在您的标记中明确包含<tbody>并使用table > tbody > tr > td选择器。
• 请勿使用直接子选择器：table tr > td

工作JSFiddle。

由于Bootstrap设置了偶数行和悬停的背景，您可能需要使您的类定义比Bootstrap的内置样式更具体：

table.table tr > td.redBg {
    background-color: red;
}

或者，您可以将!important添加到CSS中以覆盖：

.redBg {
    background-color: red !important;
}

Answer 2

更新的JQUERY

$(document).ready(function() {
    $('.table tr > td').addClass('redBg');
    console.log('hg');
});

Answer 3

如果是<td>中的第一个<table>，您尝试添加要使用的类：

$(document).ready(function() {
  $('.table tr td:first-child').addClass('redBg');
  console.log('hg');
});

https://jsfiddle.net/0vx7tjfq/5/