个人中心
gpt4 book ai didi

javascript - 如何很好地修改大量元素的属性？

转载 作者：行者123 更新时间：2023-11-30 08:54:27 25 4
gpt4 key购买 nike

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

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

最佳答案

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

表格布局如下:

<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 类选择器 $(".cell").height(h);

  • Chrome - 2335 毫秒
  • 歌剧 - 4151 毫秒
  • IE 9 - 3965 毫秒
  • Firefox - 6252 毫秒
  • Safari - 2987 毫秒

循环 2:这个循环与上面相同，但使用 $(".cell").css("height",h) 代替。更快

  • Chrome - 1276 毫秒
  • 歌剧 - 3183 毫秒
  • IE 9 - 2174 毫秒
  • Firefox - 3685 毫秒
  • Safari - 2240 毫秒

循环 3:与上面相同，但它在修改之前从 DOM 中删除表格，然后重新附加它。至少在 Firefox 中看起来更快

  • Chrome - 1259 毫秒
  • 歌剧 - 3079 毫秒
  • IE 9 - 2221 毫秒
  • Firefox - 2872 毫秒
  • Safari - 2250 毫秒

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

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

关于javascript - 如何很好地修改大量元素的属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14927706/

25 4 0
文章推荐： machine-learning - 使用哪个指标来评估具有不平衡数据的分类器？
文章推荐： java - @jsonRootName 不适用于 spring boot starter hateoas
文章推荐： java - 如何从 java android 中的相机预览中获取字节数组？
文章推荐： javascript - 如何为ajax返回的html标签注册事件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com