js显示java表_js创建10万行表格 页面显示10万行数据

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();