Question

I am working on a page that use the Ajax Control Toolkit’s TabContainer. In each TabPanel there is a GridView.

<act:TabContainer runat="server">
    <act:TabPanel runat="server">
        <asp:GridView runat="server" ...>
        </asp:GridView>
    </act:TabPanel>
      ...
    <act:TabPanel runat="server">
        <asp:GridView runat="server" ...>
        </asp:GridView>
    </act:TabPanel>
</act:TabContainer>

Then on the front-end, a JQuery tablesorter is bound to the tables. After the tablesorter is bound, the rows are styled in an alternating fashion, this is done with the following bit of code:

var rows = $('tr.Clickable');

for (var i = 1; i < rows.length; i += 2) {
    var oddrow = 'tr.Clickable:eq(' + i.toString() + ');';
    $(oddrow).addClass('odd');
}

On some machines, the browser returns a warning that a script is taking too long to finish, and this happened right after the previous javascript was added. I think that the use of the selector: tr.Clickable:eq(n) is the culprit.

I would like to just loop over the rows array and do an .addClass('odd') for rows with and index that is odd, however, the elements of the rows array don’t have an .addClass method, so I used the :eq selector to compensate.

This works, but very slowly, is there a faster way to do this?

Answer 1

use the :odd selector

$('tr.Clickable:odd').addClass('odd');