javascript - 如何使用 jquery 将类添加到 bootstrap 表中的 td 标记

Question

我在 Bootstrap 表中使用了下面的 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标签中，

这是工作 fiddle 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;
}