首頁 > 開發者 > JavaScript

javascript 極速 隱藏/顯示萬行表格列只需 60毫秒

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

隱藏表格列，最常見的是如下方式： 複製代碼 代碼如下:td.style.display = "none";

這種方式的效率極低。例如，隱藏一個千行表格的某列，在我的筆記本（P4 M 1.4G，768M記憶體）上執行需要約 4000毫秒的時間，令人無法忍受。例如如下代碼：複製代碼 代碼如下:<body>
<input type=button onclick=hideCol(1) value='隱藏第 2 列'>
<input type=button onclick=showCol(1) value='顯示第 2 列'>
<div id=tableBox></div>
<script type="text/javascript"><!--
//--------------------------------------------------------
// 時間轉為時間戳記（毫秒）
function time2stamp(){var d=new Date();return Date.parse(d)+d.getMilliseconds();}

//--------------------------------------------------------
// 建立表格
function createTable(rowsLen)
{
var str = "<table border=1>" +
"<thead>" +
"<tr>" +
"<th width=100>col1<\/th>" +
"<th width=200>col2<\/th>" +
"<th width=50>col3<\/th>" +
"<\/tr>" +
"<\/thead>" +
"<tbody>";

var arr = [];
for (var i=0; i<rowsLen; i++)
{
arr[i] = "<tr><td>" + i + "1<\/td><td>" + i + "2</td><td>" + i + "3<\/td></tr>";
}
str += arr.join("") + "</tbody><\/table>"; // 用 join() 方式快速構建字串，速度極快
tableBox.innerHTML = str; // 產生 table
}

//--------------------------------------------------------
// 隱藏/顯示指定列
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];
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) + " 毫秒");
}

//--------------------------------------------------------
createTable(1000); // 建立千行表格
// --></script>

遺憾的是，我們 google 出來的用 javascript 隱藏列的方式，都是採用這樣的代碼。
實際上，我們可以用設定第一行的 td 或 th 的寬度為 0 的方式，來快速隱藏列。
我們把 hideOrShowCol() 函數改為如下代碼：複製代碼 代碼如下:function hideOrShowCol(colIdx, isShow)
{
var t1 = time2stamp(); //
var table = tableBox.children[0];
var tr = table.rows[0];
tr.children[colIdx].style.width = isShow ? 200 : 0;

var t2 = time2stamp();
alert("耗時：" + (t2 - t1) + " 毫秒");
}

不過，僅這樣還達不到隱藏的效果，還需要設定 table 和 td 樣式為如下：複製代碼 代碼如下:<style><!--
table
{
border-collapse:collapse;
table-layout:fixed;
overflow:hidden;
}
td
{
overflow:hidden;
white-space: nowrap;
}
--></style><style bogus="1">table
{
border-collapse:collapse;
table-layout:fixed;
overflow:hidden;
}
td
{
overflow:hidden;
white-space: nowrap;
}</style>

重新測試，我們發現，隱藏千行表格的某列，只需要不到 15毫秒的時間。而即使用 createTable(10000) 建立萬行表格，再來測試，也只需要 60 毫秒的時間（都是以我的筆記本上的執行時間為參照。實際上，你們大多數人的電腦配置都比我的筆記本高很多，因此時間會更短），效率十分令人滿意。
補充：
根據 無常 網友的提議，加上了對 colgroup 處理的代碼。奇怪的是，雖然處理原理完全一樣，但對 colgroup 進行處理的時間達到了 140毫秒，即延長了一倍。尚不清楚原因。
完整代碼： 複製代碼 代碼如下:<style><!--
table
{
border-collapse:collapse;
table-layout:fixed;
overflow:hidden;
}
td
{
overflow:hidden;
white-space: nowrap;
}
--></style><style bogus="1">table
{
border-collapse:collapse;
table-layout:fixed;
overflow:hidden;
}
td
{
overflow:hidden;
white-space: nowrap;
}</style>
<body>
<input type=button onclick=createTable() value='建立表格：使用 thead'>
<input type=button onclick=createTable(1) value='建立表格：使用 colgroup'>
<br>
<input type=button onclick=hideCol(1) value='隱藏第 2 列'>
<input type=button onclick=showCol(1) value='顯示第 2 列'>

<input type=button onclick=hideCol_fast(1) value='快速隱藏第 2 列'>
<input type=button onclick=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)
{
if (isUseColGroup) // 使用 colgroup 標籤
{
var str = "<table border=1>" +
"<colgroup>" +
"<col width=100 />" +
"<col width=200 />" +
"<col width=50 />" +
"<\/colgroup>" +
"<tbody>";
}
else
{
// 使用 thead 標籤
var str = "<table border=1>" +
"<thead>" +
"<tr>" +
"<th width=100>col1<\/th>" +
"<th width=200>col2<\/th>" +
"<th width=50>col3<\/th>" +
"<\/tr>" +
"<\/thead>" +
"<tbody>";
}

var arr = [];
for (var i=0; i<tableRowsLen; i++)
{
arr[i] = "<tr><td>" + i + "1<\/td><td>" + i + "2</td><td>" + i + "3<\/td></tr>";
}
str += arr.join("") + "</tbody><\/table>"; // 用 join() 方式快速構建字串，速度極快
tableBox.innerHTML = str; // 產生 table
}

//--------------------------------------------------------
// 隱藏/顯示指定列
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 = isShow ? 200 : 0;

var t2 = time2stamp();
alert("耗時：" + (t2 - t1) + " 毫秒");
}

//--------------------------------------------------------
createTable();
// --></script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
60 to 60 formatmoney javascript javascript getdatetime unlink javascript hmac javascript javascript session javascript addslashes
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More