Q:

How to add a class to td tag in bootstrap table using jquery

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?

A:

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

