JQuery Click Event to Highlight a Row of an HTML table with Even Odd CSS

Highlighting a row is very essential when the table is very wide & need to scroll horizontally to read whole row. Using CSS and JQuery it’s very easy to implement, but a bit complex while the table has alternate row color or other conditional/unconditional CSS in it’s cells. Because, before highlighting the row you need to preserve the original style of the row even might be cells to apply those in next highlight. Covering every scenarios is very difficult. So better to concentrate on different techniques & basic in built relevant properties/functions of CSS & JQuery. Such as JQuery index() & hasClass() function. JQuery index() function helps us to retrieve a row number or position of a table, hence we can directly apply Even or Odd CSS based on the number without preserving the previous row number. JQuery hasClass() boolean function helps us to determine whether any of the matched elements are assigned with the given class or not. So we have a lot of ways to highlight an HTML table row having Even & Odd CSS. In this article we will demonstrate some implementations so that you can apply those not only to handle a specific case rather can manipulate whole HTML table CSS using JQuery in every aspects.

Objective/Outcome:
JQuery Click Event to Highlight a Row of an HTML table with Even Odd CSS

Technique #1(Using For Each Loop):

            $('#tblDevelopers tbody>tr').each(function () {
                if ($(this).hasClass('highlight')) {
                    var nRowIndex = $(this).index();
                    if (parseInt(nRowIndex,10) % 2 == 0)
                        $(this).removeClass().addClass('Even');
                    else
                        $(this).removeClass().addClass('Odd');
                    return;
                }
            });
            $(this).removeClass().addClass('highlight');

Note: The parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems). An integer between 2 and 36 that represents the radix. 10 is used for decimal. Always specify this parameter to guarantee predictable behavior. Different implementations produce different results when a radix is not specified. Another important thing is to protect highlighting the header row of the table. We can easily do this by using the JQuery selector ‘#tblDevelopers tbody>tr’. Where tblDevelopers is the id of the table & wrap up all highlightable rows within tbody block.

Technique #2(Using For Loop):

            for (i = 0; i < $('#tblDevelopers tbody>tr').length; i++) { 
                    var tr=$('#tblDevelopers tbody>tr').eq(i);
                    if (tr.hasClass('highlight')) {
                    var nRowIndex = tr.index();
                    if (parseInt(nRowIndex,10) % 2 == 0)
                        tr.removeClass().addClass('Even');
                    else
                        tr.removeClass().addClass('Odd');
                    break;
                }   
            }
            $(this).removeClass().addClass('highlight');

Technique #3(Storing previous index/property):

        $('#tblDevelopers tbody tr').click(function () {
                var nRowIndex = $('#<%= HiddenField1.ClientID %>').val();
                if (nRowIndex.length > 0) 
                {
                    if (parseInt(nRowIndex,10) % 2 == 0)
                        $('#tblDevelopers tbody tr').eq(nRowIndex).removeClass().addClass('Even');
                    else
                        $('#tblDevelopers tbody tr').eq(nRowIndex).removeClass().addClass('Odd');
                }

                $(this).removeClass().addClass('highlight');
                $('#<%= HiddenField1.ClientID %>').val($(this).index());

            });

Note: Using this technique you can store any arbitrary data in any format & can use in user’s next action. Another alternative way is to use JQuery.data().

For any issue please let us know.

Download Code Example C#        Download Code Example VB.Net

One thought on “JQuery Click Event to Highlight a Row of an HTML table with Even Odd CSS

  • October 21, 2016 at 5:36 pm
    Permalink

    thanks, please send me code of how to get selected row value into textboxs using HTML table at lightsomali@gmail.com

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code