使用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));
    }

 

转载于:https://www.cnblogs.com/xiaoxian1369/p/4043907.html