show-notice
hide-notice

Thursday 15 August 2013

highlight when empty or no data using jQuery


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

SHARE THIS POST   

0 comments :

Post a Comment

Design by Gohilinfotech | www.gohilinfotech.blogspot.com