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:
<tbody> in your markup and use table > tbody > tr > td selector.table tr > tdWorking 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;
}
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');
});
UPDATED JQUERY
$(document).ready(function() {
$('.table tr > td').addClass('redBg');
console.log('hg');
});
$('.table tr > td').addClass('redBg').infront of html defined tags. you can use.only with classnamestable, if you look inside the snippet