2

我有一个动态生成的内容表（来自 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>
4

1 回答 1

2

我认为最快的实现是过滤掉这些值并使用 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");
    });
});

希望这可以帮助！

于 2013-09-04T11:40:31.703 回答