Question

给定一个固定标题HTML表，我试图将标题列与正文行列对齐。我这样做是因为我用来固定标题的CSS导致标题与正文的其他部分不对齐。

我正在使用的javascript工作，但速度极慢。关于如何加快速度的任何想法？

这是显示问题的小提琴。现在，相对较小的桌子需要大约5秒钟。 http://jsfiddle.net/w93NU/

以下是我正在使用的代码：

function fixedHeader($table) {
    //This function compares the header row with the first body row and lines up all of the widths
    var firstRowTds = $table.children("tbody:first").children("tr:first").children("td");
    var headerRowThs = $table.find("th");

    for (var i = 0; i < firstRowTds.length; i++) {
        var head = headerRowThs[i];
        var cell = firstRowTds[i];
        var width = (Math.max($(cell).outerWidth(), $(head).outerWidth())) + "px";
        //Here are my problem pieces.  Setting these values are what kills the perfomanrce
        $(cell).css({
            "min-width": width,
            "max-width": width
        });
        $(head).css({
            "min-width": width,
            "max-width": width
        });
    }
}

Answer 1

好的，经过多次试验和错误，如果您在样式表中注释掉最后一项，那么它很快。我不知道为什么。

更新了小提琴here

/* fixed width for THs */
/* the tbody needs to be 16px less than the thead, for the scrollbar */
/*#readiness-grid tbody td {
    width: 242px;
}*/

Answer 2

// changing:
var firstRowTds = $table.children("tbody:first").children("tr:first").children("td");
var headerRowThs = $table.find("th");
// to:
var firstRowTds = $table.children("tbody:first > tr:first > td");
var headerRowThs = $table.find("thead > th");

对节点进行查找，并将样本表的开始/结束时间之间的时间从~800ms减少到~2ms。

将最小和最大宽度设置得非常慢

2 个答案: