开发学院网页设计JavaScript javascript 极速:隐藏/显示万行表格列只需 60毫秒... 阅读

javascript 极速:隐藏/显示万行表格列只需 60毫秒

 2010-09-14 13:43:14 来源:WEB开发网   
核心提示:隐藏表格列,最常见的是如下方式:td.style.display = "none";这种方式的效率极低,javascript 极速:隐藏/显示万行表格列只需 60毫秒,例如,隐藏一个千行表格的某列,在我的笔记本(P4 M 1.4G,768M内存)上执行需要约 4000毫秒的时间

隐藏表格列,最常见的是如下方式:

td.style.display = "none";

这种方式的效率极低。例如,隐藏一个千行表格的某列,在我的笔记本(P4 M 1.4G,768M内存)上执行需要约 4000毫秒的时间,令人无法忍受。例如如下代码:

<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>

1 2 3  下一页

Tags:javascript 隐藏 显示

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
更多精彩
    赞助商链接

    热点阅读
      焦点图片
        最新推荐
          精彩阅读