如何使用 jquery 将类添加到引导表中的 td 标记答案

【问题标题】：How to add a class to td tag in bootstrap table using jquery如何使用 jquery 将类添加到引导表中的 td 标记
【发布时间】：2017-08-15 08:59:26
【问题描述】：

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

谁能帮我解决这个问题？

【问题讨论】：

【解决方案1】：

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

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

这意味着<tr> 不再是<table> 的直接子代，并且您的table > tr 选择器将不再起作用。

要解决它，您可以：

工作JSFiddle。

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

更新的 JQUERY

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

【讨论】：