使用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));
}
上一篇:BootStrap2学习日记17---导航路径和分页


下一篇:sharepoint delete file