当前位置:主页   - 电脑 - 网站开发 - ASP.Net
cells[index],children[index]效率问题
来源:网络   作者:   更新时间:2012-02-23
收藏此页】    【字号    】    【打印】    【关闭

  看到以下代码,并做了测试:

<body>
<input type=button onclick=hideCol(1) value='隐藏第 2 列'>
<input type=button onclick=showCol(1) value='显示第 2 列'>
<div id=tableBox></div>
<script>

//--------------------------------------------------------
// 时间转为时间戳(毫秒)
function time2stamp(){var d=new Date();return Date.parse(d)+d.getMilliseconds();}

//--------------------------------------------------------
// 创建表格
function createTable(rowsLen)
{
    var str = "<table border=1>" +
                "<thead>" +
                    "<tr>" +
                        "<th width=100>col1<\/th>" +
                        "<th width=200>col2<\/th>" +
                        "<th width=50>col3<\/th>" +
                    "<\/tr>" +
                "<\/thead>" +
                "<tbody>";

    var arr = [];
    for (var i=0; i<rowsLen; i++)
    {
        arr[i] = "<tr><td>" + i + "1<\/td><td>" + i + "2</td><td>" + i + "3<\/td></tr>";
    }
    str += arr.join("") + "</tbody><\/table>"; // 用 join() 方式快速构建字串,速度极快
    tableBox.innerHTML = str; // 生成 table
}

//--------------------------------------------------------
// 隐藏/显示指定列
function hideCol(colIdx){hideOrShowCol(colIdx, 0);}
function showCol(colIdx){hideOrShowCol(colIdx, 1);}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function hideOrShowCol(colIdx, isShow)
{
    var t1 = time2stamp(); //
    var table = tableBox.children[0];
    var rowsLen = table.rows.length;
    var lastTr = table.rows[0];
    for (var i=0; i<rowsLen; i++)
    {
        var tr = table.rows[i];
        tr.children[colIdx].style.display = isShow ? "" : "none";
    }
   
    var t2 = time2stamp();
    alert("耗时:" + (t2 - t1) + " 毫秒");
}

//--------------------------------------------------------
createTable(1000); // 创建千行表格

</script>

  然后对function hideOrShowCol对了以下修改

function hideOrShowCol(colIdx, isShow)
{
    var t1 = time2stamp(); //
    var table = tableBox.children[0];
    var rowsLen = table.rows.length;
    var lastTr = table.rows[0];
    for (var i=0; i<rowsLen; i++)
    {
        var tr = table.rows[i];
        tr.cells[colIdx].style.display = isShow ? "" : "none";
    }
   
    var t2 = time2stamp();
    alert("耗时:" + (t2 - t1) + " 毫秒");
}

  做测试:速度上要慢10%以上

其它资源
来源声明

版权与免责声明
1、本站所发布的文章仅供技术交流参考,本站不主张将其做为决策的依据,浏览者可自愿选择采信与否,本站不对因采信这些信息所产生的任何问题负责。
2、本站部分文章来源于网络,其版权为原权利人所有。由于来源之故,有的文章未能获得作者姓名,署“未知”或“佚名”。对于这些文章,有知悉作者姓名的请告知本站,以便及时署名。如果作者要求删除,我们将予以删除。除此之外本站不再承担其它责任。
3、本站部分文章来源于本站原创,本站拥有所有权利。
4、如对本站发布的信息有异议,请联系我们,经本站确认后,将在三个工作日内做出修改或删除处理。
请参阅权责声明