js创建10万行表格 页面显示10万行数据
table
{
border-collapse:collapse;
table-layout:fixed;
overflow:hidden;
}
td
{
overflow:hidden;
white-space: nowrap;
}
-->
{
border-collapse:collapse;
table-layout:fixed;
overflow:hidden;
}
td
{
overflow:hidden;
white-space: nowrap;
}
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 = "
"
" +"
" +"
" +"
" +"" +
"
";}
else
{
// 使用 thead 标签
var str = "
"" +
"
" +"
col1" +"
col2" +"
col3" +"" +
"" +
"
";}
var arr = [];
for (var i=0; i
{
arr[i] = "
" + i + "--1" + i + "--2" + i + "--3";}
str += arr.join("") + "
"; // 用 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
{
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();