如何使用jquery在bootstrap表中添加一个类到td标签

问题描述

  $（document）.ready（function（）{$ b）我的引导表使用了下面的jquery代码$ b $（'。table> tr> td'）。addClass（'redBg'）; 
 console.log（'hg'）; 
}）; 
  

以及我试过的这个

<$ （'.cb'（'redBg'））;
（$。$ $ $''table> tbody> tr> td'）。 console.log（'hg'）;

}）;

但该类不会添加到 td 标记，

这里是工作小提琴 https：

任何人都可以帮我解决这个问题吗？

解决方案

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

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

这意味着< tr> 不是更长的直接孩子< table> 和你的表> tr 选择器不再适用。

要解决该问题，您可以：

• 在标记中明确包含< tbody> ，并使用表> tbody> tr> td 选择器


• 不要使用直接的子选择器： table tr> td

工作

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

或者，您可以添加！important 到你的CSS来覆盖：

  .redBg {
 background-color：red！important; 
} 
  

I have used below jquery code for my bootstrap table

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

As well as i tried this one

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

});

But the class will not added to the td tag,

Here is the working fiddle https://jsfiddle.net/udarazz/0vx7tjfq/

Can anyone help me to fix this issue?

解决方案

If you omit it, many browsers will implicitly add a <tbody> container to wrap all table rows. You can verify it by using your browser's developer tools/inspector. The resulting structure:

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

It means <tr> is no longer a direct child of <table>, and your table > tr selector won't work anymore.

To work around it, you can either:

• Explicitly include <tbody> in your markup and use table > tbody > tr > td selector.
• Don't use direct child selector: table tr > td

Working JSFiddle.

As Bootstrap styles the backgrounds of even rows and hovers, you might need to make your class definition more specific than Bootstrap's built-in styles:

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

Alternatively, you can add !important to your CSS to override:

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

这篇关于如何使用jquery在bootstrap表中添加一个类到td标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！