js创建10万行表格 页面显示10万行数据
<html>
<head></head><style>table{ border-collapse:collapse; table-layout:fixed; overflow:hidden;}td{ overflow:hidden; white-space: nowrap;}--></mce:style><style mce_bogus="1">table{ border-collapse:collapse; table-layout:fixed; overflow:hidden;}td{ overflow:hidden; white-space: nowrap;}</style><script src="jquery-1.3.2.min.js"></script><body><input type=button οnclick=createTable() value='创建表格：使用 thead'><input type=button οnclick=createTable(1) value='创建表格：使用 colgroup'><br><input type=button οnclick=hideCol(1) value='隐藏第 2 列'><input type=button οnclick=showCol(1) value='显示第 2 列'> <input type=button οnclick=hideCol_fast(1) value='快速隐藏第 2 列'><input type=button οnclick=showCol_fast(1) value='快速显示第 2 列'><div id=tableBox></div><script type="text/javascript">var tableRowsLen = 10000; // 创建万行表格//--------------------------------------------------------
// 时间转为时间戳（毫秒）function time2stamp(){var d=new Date();return Date.parse(d)+d.getMilliseconds();}//--------------------------------------------------------
// 创建表格function createTable(isUseColGroup){ var t1 = time2stamp(); if (isUseColGroup) // 使用 colgroup 标签 { var str = "<table border=1>" + "<colgroup>" + "<col width=100 class=col1 />" + "<col width=200 class=col2/>" + "<col width=50 class=col3/>" + "<\/colgroup>" + "<tbody>"; } else { // 使用 thead 标签 var str = "<table border=1>" + "<thead>" + "<tr>" + "<th width=100 class=col1>col1<\/th>" + "<th width=200 class=col2>col2<\/th>" + "<th width=50 class=col3>col3<\/th>" + "<\/tr>" + "<\/thead>" + "<tbody>"; }var arr = [];
for (var i=0; i<tableRowsLen; i++) { arr[i] = "<tr><td class=col1>" + i + "--1<\/td><td class=col2>" + i + "--2</td><td class=col3>" + i + "--3<\/td></tr>"; } str += arr.join("") + "</tbody><\/table>"; // 用 join() 方式快速构建字串，速度极快 tableBox.innerHTML = str; // 生成 table var t2 = time2stamp(); alert("耗时：" + (t2 - t1) + " 毫秒");}
//--------------------------------------------------------
// 隐藏/显示指定列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];if (rowsLen > 1001)
{ if (!confirm("将要对 1000 行以上的表格操作，这将非常耗时（甚至导致浏览器死掉）。\n您确定要继续吗？")) return; }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) + " 毫秒");}//--------------------------------------------------------
// 隐藏/显示指定列 - 快速function hideCol_fast(colIdx){hideOrShowCol_fast(colIdx, 0);}function showCol_fast(colIdx){hideOrShowCol_fast(colIdx, 1);}// - - - - - - - - - - - - - - - - - - - - - - - - - - - -function hideOrShowCol_fast(colIdx, isShow){ var t1 = time2stamp(); // var table = tableBox.children[0]; var thead = table.children[0]; // 可能是 thead 或者 tbody，也可能是 colgroup if (thead.tagName.toLowerCase()=="colgroup") // 对 colgroup 特殊处理 { var td = thead.children[colIdx]; } else { // 注意：如果表格没有 thead 和 tbody 标签，则 table.children[0] 是 tbody var tr = thead.children[0]; var td = tr.children[colIdx]; } td.style.width = 0; var t2 = time2stamp(); alert("耗时：" + (t2 - t1) + " 毫秒");}//--------------------------------------------------------
createTable();</script></html>
-精品推荐：
1、
2、
3、
4、
5、
6、
7、
8、
9、
10、
11、
12、
13、