首页 > 代码库 > 使用JS动态创建含有1000行的表格

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

 

使用JS动态创建含有1000行的表格