zoukankan      html  css  js  c++  java
  • 使用JS动态创建含有1000行的表格

    function addTable(){
            createTable1(1000);
            //createTable2(1000);
            //createTable3(1000);
            //createTable4(1000);
            //createTable5(1000);
        }
        
        function createTable1(rows){
            var div = document.getElementById("div1Id");
            var child = div.childNodes;
            for(var i = 0,len = child.length;i < len;i ++){
                div.removeChild(child[i]);
            }
            var start = new Date().getTime();
            var str = "<table>";
            str += "<tr>";
            for(var i = 0;i < 5;i ++){
                str += "<th>列" + i + "</th>";
            }
            str += "</tr>";
            for(var  i = 0;i < rows;i ++){
                str += "<tr>"
                for(var j = 0;j < 5;j ++){
                    str += "<td>" + j + "</td>";
                }            
                str += "</tr>";
            }
            str += "</table>";
            //div.innerHTML = str;
            //$(div).append(str);
            $(div).html(str);
            var end = new Date().getTime();
            console.log("createTable1: " + (end - start));
        }
        
        function createTable2(rows){
            var div = document.getElementById("div2Id");
            var child = div.childNodes;
            for(var i = 0,len = child.length;i < len;i ++){
                div.removeChild(child[i]);
            }
            var start = new Date().getTime();
            var str = "<table>";
            str = str + "<tr>";
            for(var i = 0;i < 5;i ++){
                str = str + "<th>列" + i + "</th>";
            }
            str =str + "</tr>";
            for(var  i = 0;i < rows;i ++){
                str = str + "<tr>"
                for(var j = 0;j < 5;j ++){
                    str = str + "<td>" + j + "</td>";
                }            
                str = str + "</tr>";
            }
            str = str + "</table>";
            //div.innerHTML = str;
            $(div).append(str);
            var end = new Date().getTime();
            alert("createTable2: " + (end - start));
        }
        
        function createTable3(rows){
            var div = document.getElementById("div3Id");
            var child = div.childNodes;
            for(var i = 0,len = child.length;i < len;i ++){
                div.removeChild(child[i]);
            }
            var start = new Date().getTime();
            var str = [];
            str.push("<table>" , "<tr>");
            for(var i = 0;i < 5;i ++){
                str.push("<th>列" + i + "</th>");
            }
            str.push("</tr>");
            for(var  i = 0;i < rows;i ++){
                str.push("<tr>");
                for(var j = 0;j < 5;j ++){
                    str.push("<td>" + j + "</td>");
                }            
                str.push("</tr>");
            }
            str.push("</table>");
            div.innerHTML = str.join("");
            var end = new Date().getTime();
            alert("createTable3: " + (end - start));
        }
        
        function createTable4(rows){
            var div = document.getElementById("div4Id");
            var child = div.childNodes;
            for(var i = 0,len = child.length;i < len;i ++){
                div.removeChild(child[i]);
            }
            var start = new Date().getTime();
            var _table = document.createElement('table');
            var _row = document.createElement('tr');
            _table.appendChild(_row);
            for(var i = 0;i < 5;i ++){
                var _cell = document.createElement('td');
                _cell.innerHTML = 'col' + i;
                _row.appendChild(_cell);
            }
            for(var i = 0;i < rows;i ++){
                var _row = document.createElement('tr');
                _table.appendChild(_row);
                for(var j = 0;j < 5;j ++){
                    var _cell = document.createElement('td');
                    _cell.innerHTML = i + '/' + j;
                    _row.appendChild(_cell);
                }
            }
            div.appendChild(_table);
            var end = new Date().getTime();
            alert("createTable4: " + (end - start));
        }
        
        function createTable5(rows){
            var div = document.getElementById("div4Id");
            var child = div.childNodes;
            for(var i = 0,len = child.length;i < len;i ++){
                div.removeChild(child[i]);
            }
            var start = new Date().getTime();
            var _table = document.createElement('table');
            var _row = document.createElement('tr');
            var _tableFrag = document.createDocumentFragment();
            var _rowFrag = document.createDocumentFragment();
            _tableFrag.appendChild(_row);
            for(var i = 0;i < 5;i ++){
                var _cell = document.createElement('td');
                _cell.innerHTML = 'col' + i;
                _rowFrag.appendChild(_cell);
            }
            _row.appendChild(_rowFrag);
            
            for(var i = 0;i < rows;i ++){
                var _row = document.createElement('tr');
                _tableFrag.appendChild(_row);
                var _rowFrag = document.createDocumentFragment();
                for(var j = 0;j < 5;j ++){
                    var _cell = document.createElement('td');
                    _cell.innerHTML = i + '/' + j;
                    _rowFrag.appendChild(_cell);
                }
                _row.appendChild(_rowFrag);
            }
            _table.appendChild(_tableFrag);
            div.appendChild(_table);
            var end = new Date().getTime();
            alert("createTable5: " + (end - start));
        }
  • 相关阅读:
    Linux-Rsync命令参数详解
    Linux-iptables(2)
    Linux-iptables
    Linux-awk command
    Linux-sed command
    Linux-tomcat
    C#调用默认浏览器打开网页的几种方法
    个人记录用
    .NET中的Request
    sql标量值函数,将汉字转化为拼音,无音标
  • 原文地址:https://www.cnblogs.com/xiaoxian1369/p/4043907.html
Copyright © 2011-2022 走看看