jQuery code to highlight empty table element

Find jQuery code to highlight those <td> elements within a table/ Grid/ GridView/ DataGrid which have no value associated with it or which are empty.

All is required is to loop through all the <td> element and check it's value. If it is empty, then assign background color to it so that it looks highlighted.

$(document).ready(function() {
    $("#gdRows td").each(function() {
        var cellText = $(this).text();
        if ($.trim(cellText) == '') 
        {
            $(this).css('background-color', 'LightGreen');
        }
    });
});?

See result below


If you want then you can also assign some default data to these empty <td> elements. Using text() method set the default text.

$(document).ready(function() {
    $("#gdRows td").each(function() {
        var cellText = $(this).text();
        if ($.trim(cellText) == '') 
        {
            $(this).text('N/A');
        }
    });
});?
See Complete Code

Feel free to contact me for any help related to jQuery, I will gladly help you.



Responsive Menu
Add more content here...