CODEWITHSUNDEEP
javascriptjquerycss
dsol828
dsol828

Reputation: 413

Alternating row color based on previous row using jquery

I have a table of dynamically generated content (PHP from mysql). The first column is always a date. Some records share the same date.

My goal is to style all records with the same date with the same background color and for the date to only appear in the first event of that day.

I'm no javascript/jquery expert, but here is my first go. It is not yet fully functional. Here are my two problems:

1: Cannot get the repeated dates to disappear (see note in code)

2: The whole method of adding classes according to the content of the cell above seems incredibly slow. Page loads are around 10-12 seconds with a table of about 100-150 rows. Is this the fastest method to achieve this?

$(document).ready(function(){
    $("td.date").each(function(){
        var cellAbove = $(this).parent().prev().children(".date").html();
        if ($(this).html()!==cellAbove){$(this).parent().addClass("firstDate");}
        if ($(this).html()==cellAbove){$(this).parent().addClass("multiDate");}
    });
    $("tr.firstDate").filter(":even").css("background-color","#FFFFFF");
    $("tr.firstDate").filter(":odd").css("background-color","#F4F4F4");
    $("tr.multiDate").each(function(){
        $(this).children(".date").text(); //NOT FUNCTIONING
        $(this).css("background-color",$(this).prev().css("background-color"));
    });
});

<table>
    <tr>
        <td>DATE</td>
        <td>EVENT</td>
    </tr>
    <tr>
        <td class="date">January 5, 2013</td>
        <td>Board Meeting</td>
    </tr>
    ...
</table>

Upvotes: 3

Views: 975

Answers (1)

Soturi
Soturi

Reputation: 1496

I think the fastest implementation would be to filter out the values and set your html classes server-side using PHP.

But I went ahead and wrote a JS version for you anyways (and for my morning problem-solving) =)

Your first function was at almost a 2n algorithm because you were running 2 different loops. My first suggestion is to do the work in the first loop. Also, every time you use a jQuery selector, you are also performing a loop. jQuery isn't instantaneous, and is essentially traversing all DOM elements (another loop!) to find your elements. I count 7 jQuery selectors in your code, and 2 "each" loops, for a total of 9 loops. You can save your jQuery objects if they will be reused, so you don't have to "re-loop" to acquire them. For example, in the future you can save your $("tr.firstDate") object in a variable since you use it twice. In my code, you can see that I save my $me variable for future use. If I wanted to make it even faster, I could save the $me.html() value as well. Using this approach for much larger applications, you would have to consider the trade-off of memory size vs. speed.

Also, I used the .html("") method to clear the contents of the cells you wanted empty.

Another suggestion is to use CSS to decide the color, rather than setting the color using jQuery. Add the class and then have your CSS do the work. You can see in my code that I only add the .alt class to the rows I want with the alternate color.

.alt td { background: #666; }

Also, don't rely on styling the tr background color. I don't think this is supported cross-browser. I would style the td instead. Also, in my jsFiddle I used th tags for your headers, for semantic purposes.

Here is a jsFiddle. The javascript is below:

$(document).ready(function(){
    var parity = true;
    var curDate = null;
    $("td.date").each(function(){
        var $me = $(this);
        if(curDate == null || curDate != $me.html())
        {
            curDate = $me.html();
            parity = !parity;
        }
        else
            $me.html("");

        if(parity)
            $me.parent().addClass("alt");
    });
});

Hope this helps!

Upvotes: 3

Related Questions