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 , usetable > 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; }
Comments
Post a Comment