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.