Question

我有一个动态生成内容的表（来自mysql的PHP）。第一列始终是日期。有些记录共享相同的日期。

我的目标是使用相同的背景颜色设置具有相同日期的所有记录的样式，并且日期只显示在当天的第一个事件中。

我不是javascript / jquery专家，但这是我的第一次去。它还没有完全发挥作用。这是我的两个问题：

1：无法让重复的日期消失（参见代码中的注释）

2：根据上面单元格的内容添加类的整个方法似乎非常慢。页面加载大约10-12秒，表格大约为100-150行。这是实现这一目标的最快方法吗？

$(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>

Answer 1

我认为最快的实现是过滤掉值并使用PHP设置你的html类服务器端。

但是我继续为你写了一个JS版本（并且为我早上的问题解决）=）

你的第一个函数几乎是2n算法，因为你运行了2个不同的循环。我的第一个建议是在第一个循环中完成工作。此外，每次使用jQuery选择器时，您也会执行循环。 jQuery不是即时的，而且基本上是遍历所有DOM元素（另一个循环！）来查找你的元素。我在你的代码中计算了7个jQuery选择器，以及2个“每个”循环，总共9个循环。如果jQuery对象将被重用，您可以保存它们，因此您不必“重新循环”以获取它们。例如，将来您可以将$("tr.firstDate")对象保存在变量中，因为您使用了两次。在我的代码中，您可以看到我保存了$me变量以供将来使用。如果我想让它更快，我也可以保存$me.html()值。对于更大的应用程序使用此方法，您必须考虑内存大小与速度的权衡。

此外，我使用.html("")方法清除您想要为空的单元格的内容。

另一个建议是使用CSS来决定颜色，而不是使用jQuery设置颜色。添加该类，然后让您的CSS完成工作。您可以在我的代码中看到，我只使用备用颜色将.alt类添加到我想要的行中。

.alt td { background: #666; }

此外，不要依赖于tr背景颜色的样式。我认为这不支持跨浏览器。我会改为td的样式。此外，在我的jsFiddle中，出于语义目的，我为标题使用了th标记。

这是jsFiddle。 javascript如下：

$(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");
    });
});

希望这有帮助！

使用jquery基于前一行交替行颜色

1 个答案: