Highlight Negative value columns in ASP.NET GridView using jQuery

Introduction:

In this post, find jQuery code to highlight negative value columns/cells in ASP.NET GridView. This is a helpful feature as it draws user's attention immediately and informs him that there is something wrong with some of the entities.

HTML:

    


        
ID
        
Product Name
        
Quantity
        
Price
    

        
1
        
Mouse
        
10
        
100
    

        
2
        
Speaker
        
15
        
990
    

        
3
        
Hard Drive
        
-35
        
3990
    

        
4
        
RAM
        
22
        
399
    

        
5
        
Wireless Keyboard
        
10
        
3500
    

        
6
        
Wi-Fi Router
        
-1
        
3990
    

        
7
        
LCD
        
62
        
3000
    

        
8
        
Intel Processor
        
-5
        
7000
    

        
9
        
Monitor
        
25
        
1990
    

        
10
        
Keyboard
        
20
        
350
    

CSS:

.negative {
    font-weight: bold;
    color:red;
}

JS:

$(document).ready(function () {
    $("#gdRows tr:has(td)").each(function () {
        var $tdElement = $(this).find("td:eq(2)");
        var cellText = $tdElement.text();
        if ($.isNumeric(cellText)) {
            var iNum = parseInt(cellText);
            if (iNum < 0) $tdElement.addClass('negative');
        }
    });
});