Question

我有一个目前由95x120 = 11400 TD组成的大表，并且想要动态编辑某一行中所有单元格的高度和背景颜色等属性，或者列，甚至是一堆行/列。我想这样做是为了让用户能够调整行/列的大小。完成这项工作的好方法是什么？

顺便说一下，我表中的所有TD都有行/列的唯一类，例如row1，row2，row3，col1，col2，col3动态添加，而表是通过Javascript构建的。

Answer 1

这可以通过动态修改css规则来真正有效地完成。存储公共属性（即规则中的一行单元格的高度）而不是将其全部存储在每个元素中也更有意义。它也占用更少的内存。

使用如下表格布局：

<table>
    <tr>
        <td class="row1 col1">data</td>
        <td class="row2 col2">data</td>
        <td class="row3 col3">data</td>
    </tr>
    <tr>
        <td class="row1 col1">data</td>
        <td class="row2 col2">data</td>
        <td class="row3 col3">data</td>
    </tr>
    <tr>
        <td class="row1 col1">data</td>
        <td class="row2 col2">data</td>
        <td class="row3 col3">data</td>
    </tr>
</table>

我们可以这样做：

var numRows=3, numCols=3;
document.getElementsByTagName('head')[0].appendChild(document.createElement('style'));
var sheet=document.styleSheets[1];
//Or instead of creating a new sheet we could just get the first exisiting one like this:
//var sheet=document.styleSheets[0]; 
var selector, rule, i, rowStyles=[], colStyles=[];
//Create rules dynamically
for (i=0; i<numRows; i++) {
        selector=".row"+i;
        rule="{height:20px}";
        if (sheet.insertRule)
            sheet.insertRule(selector+rule, 0);//This puts the rule at index 0
        else
            sheet.addRule(selector2, rule2, 0);//IE does things differently
        rowStyles[i]=(sheet.rules||sheet.cssRules)[0].style;//Remember you have to fetch the rules-array from the sheet and not hold on to the old rules-array, since a new one is created during each insertion. Oh, and IE does things differently again; cssRules instead of rules
}
for (i=0; i<numCols; i++) {
        selector=".col"+i;
        rule="{background-color:white}";
        if (sheet.insertRule)
            sheet.insertRule(selector+rule, 0);
        else
            sheet.addRule(selector2, rule2, 0);
        colStyles[i]=(sheet.rules||sheet.cssRules)[0].style;
}

//Now they can be changed real easy and efficiently like this:
//This line changes the height for the second row, simply by modifying their css-rule, not setting a style-height on each element
rowStyles[1].height="50px";
//It is also really easy to adjust properties of rules added from css-file, just iterate through the rules/cssRules-array checking the selectorText-property of each object until the right one is found.

我做了一些基准测试，除非我在某处出错，否则差异非常大。但是，除了基准测试之外，它确实在实际用例中发挥了巨大的显着差异。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>

        <style>
      td {
      border: 1px solid black;
      width: 10px;
      height: 10px;
      }
    </style>
        <script src="http://code.jquery.com/jquery-latest.min.js " charset="UTF-8"></script>
    </head>
    <body>
        <table id="table">
            <tr id="row">
            </tr>
        </table>
            <script type="text/javascript">
            var tr=document.getElementById("row");
            for (var i=0; i<300; i++) {
                var cell=tr.insertCell(0);
                cell.className="cell";
            }

            var sheet=document.styleSheets[0];
            var c2=(sheet.rules||sheet.cssRules)[0].style;
            var table=document.getElementById("table");
            var startTime;


        //First loop
        startTime=new Date().getTime();
        var c1=$(".cell");
        for (var i=0; i<1000; i++) {
            c1.height(i);
        }
        var time1=new Date().getTime()-startTime;
        //Second loop
        startTime=new Date().getTime();
        c1=$(".cell");
        for (var i=0; i<1000; i++) {
            c1.css("height",i);
        }
        time2=new Date().getTime()-startTime;
        //Third loop
        startTime=new Date().getTime();
        c1=$(".cell");
        document.body.removeChild(table);
        for (var i=0; i<1000; i++) {
            c1.css("height",i);
        }
        document.body.appendChild(table);
        time3=new Date().getTime()-startTime;
        //Fourth loop
        startTime=new Date().getTime();
        for (var i=0; i<1000; i++) {
            c2.height=i+"px";
        }
        var time4=new Date().getTime()-startTime;

        alert ("First:"+time1+" ms\nSecond:"+time2+" ms\nThird:"+time3+" ms\nForth:"+time4+" ms");
        </script>    
    </body>
</html>

由于某些原因，这会导致误导吗？在那种情况下，我无法确定我出错的地方，所以我很感激反馈。这些是我得到的结果。

完成所需的时间：

循环1：这个循环使用一个简单的jquery类选择器$（＆＃34; .cell＆＃34;）。height（h）;

Chrome - 2335 ms
Opera - 4151 ms
IE 9 - 3965 ms
Firefox - 6252 ms
Safari - 2987 ms

循环2：这个与上面相同，但使用$（＆＃34; .cell＆＃34;）。css（＆＃34; height＆＃34;，h）代替。它更快

Chrome - 1276 ms
Opera - 3183 ms
IE 9 - 2174 ms
Firefox - 3685 ms
Safari - 2240 ms

循环3：与上面相同，但它在修改之前从DOM中删除了表，然后重新附加它。在Firefox中似乎更快

Chrome - 1259 ms
Opera - 3079 ms
IE 9 - 2221 ms
Firefox - 2872 ms
Safari - 2250 ms

循环4：这个动态修改css规则：

Chrome - 1毫秒
歌剧 - 10毫秒
IE 9 - 7 ms
Firefox - 2 ms
Safari - 13 ms

Answer 2

在对如此庞大的结构进行更改时，最好先从文档中删除它，这样只有在重新插入文档时才会重新处理它。

因此，假设您的表位于名为table的变量中，您可以这样做：

var prnt = table.parentNode, nxtsbl = table.nextSibling;
prnt.removeChild(table);
// now do all your modifications, such as looping through rows etc.
prnt.insertBefore(table,nxtsbl);

Answer 3

你也可以做table.rows [0]，它给出了该行中所有TD的数组。然后循环浏览并按需更改

Answer 4

如果您的所有单元格都使用适当的类标记，则非常简单。

假设您要更改某列的宽度。

$(".col3").width(newWidth);

或者如果你想改变一堆列的宽度。

$(".col3,.col5").width(newWidth);

与

类似

$(".row3,.row5,.row9,.row12").height(newHeight);

或者如果你想改变背景颜色

$(".col3").css("background-color","#ff0000");

如何以良好的方式修改大量元素的属性？

4 个答案: