Introduction:
Yesterday for one of my requirement, I need to highlight all the
<td> element of the table, if they are empty or contains no data.
To implement this, define a CSS class called "highlight".
HTML:
ID |
Product Name |
Quantity |
Price |
1 |
Mouse |
10 |
|
2 |
Speaker |
15 |
990 |
3 |
Hard Drive |
|
3990 |
4 |
|
22 |
399 |
5 |
Wireless Keyboard |
10 |
|
CSS:
.highlight {
background-color:PaleGoldenrod;
}
JS:
$(document).ready(function () {
$("table td").each(function () {
if ($(this).html().trim().length == 0)
$(this).addClass('highlight');
});
});