在 TabContainers 中将交替行样式应用于 GridView 的更有效方法答案

【问题标题】：More efficient way to apply alternating row style to GridView in TabContainers在 TabContainers 中将交替行样式应用于 GridView 的更有效方法
【发布时间】：2012-01-05 02:25:05
【问题描述】：

我正在处理一个使用 Ajax 控制工具包的TabContainer 的页面。在每个TabPanel 中都有一个 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>

然后在前端，将 JQuery 表排序器绑定到表。绑定 tablesorter 后，行以交替方式设置样式，这是通过以下代码完成的：

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

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

在某些机器上，浏览器会返回一个警告，指出脚本需要很长时间才能完成，这发生在添加之前的 javascript 之后。我认为使用选择器：tr.Clickable:eq(n) 是罪魁祸首。

我想循环遍历 rows 数组并为具有奇数和索引的行执行 .addClass('odd')，但是，rows 数组的元素没有 .addClass 方法，所以我使用:eq 选择器来补偿。

这可行，但速度很慢，有没有更快的方法来做到这一点？

【问题讨论】：

标签： javascript jquery asp.net css ajax

【解决方案1】：

使用:odd 选择器

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

【讨论】：