如何使用jQuery在bootstrap表中向td标签添加类

Question

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?

Answer 1

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

Answer 2

UPDATED JQUERY

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

Answer 3

If its the first <td> in the <table> you're trying to add the class to use:

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

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