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

i have used below jquery code bootstrap table

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

as tried one

$(document).ready(function() {     $('.table>tbody>tr>td').addclass('redbg');     console.log('hg');  }); 

but class not added td tag,

here working fiddle https://jsfiddle.net/udarazz/0vx7tjfq/

can me fix issue?

if omit it, many browsers implicitly add <tbody> container wrap table rows. can verify using browser's developer tools/inspector. resulting structure:

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

it means <tr> no longer direct child of <table>, , table > tr selector won't work anymore.

to work around it, can either:

• explicitly include <tbody> in markup , use table > tbody > tr > td selector.
• don't use direct child selector: table tr > td

working jsfiddle.

as bootstrap styles backgrounds of rows , hovers, might need make class definition more specific bootstrap's built-in styles:

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

alternatively, can add !important css override:

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