javascriptは非常に速く隠れています./万行の表列を表示するには60ミリ秒しかかかりません.

表の列を非表示にする場合、最も一般的なのは次のような方法です.

 
  
td.style.display = "none"; 
  
 
 

この方式の効率は極めて低い.例えば、千行の表のある列を隠して、私のノート(P 4 M 1.4G、768 Mメモリ)の上で実行するには約4000ミリ秒の時間が必要で、耐えられません.例えば以下のコードです.

 
  
 
  
 
  
 
  
 
  
<!-- 
  <br>//-------------------------------------------------------- 
  <br>//        （  ） 
  <br>function time2stamp(){var d=new Date();return Date.parse(d)+d.getMilliseconds();} 
  <br> 
  <br>//-------------------------------------------------------- 
  <br>//      
  <br>function createTable(rowsLen) 
  <br>{ 
  <br>var str = "<table border=1>" + 
  <br>"<thead>" + 
  <br>"<tr>" + 
  <br>"<th width=100>col1<\/th>" + 
  <br>"<th width=200>col2<\/th>" + 
  <br>"<th width=50>col3<\/th>" + 
  <br>"<\/tr>" + 
  <br>"<\/thead>" + 
  <br>"<tbody>"; 
  <br> 
  <br>var arr = []; 
  <br>for (var i=0; i<rowsLen; i++) 
  <br>{ 
  <br>arr[i] = "<tr><td>" + i + "1<\/td><td>" + i + "2</td><td>" + i + "3<\/td></tr>"; 
  <br>} 
  <br>str += arr.join("") + "</tbody><\/table>"; //   join()         ，     
  <br>tableBox.innerHTML = str; //    table 
  <br>} 
  <br> 
  <br>//-------------------------------------------------------- 
  <br>//   /      
  <br>function hideCol(colIdx){hideOrShowCol(colIdx, 0);} 
  <br>function showCol(colIdx){hideOrShowCol(colIdx, 1);} 
  <br>// - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
  <br>function hideOrShowCol(colIdx, isShow) 
  <br>{ 
  <br>var t1 = time2stamp(); // 
  <br>var table = tableBox.children[0]; 
  <br>var rowsLen = table.rows.length; 
  <br>var lastTr = table.rows[0]; 
  <br>for (var i=0; i<rowsLen; i++) 
  <br>{ 
  <br>var tr = table.rows[i]; 
  <br>tr.children[colIdx].style.display = isShow ? "" : "none"; 
  <br>} 
  <br> 
  <br>var t2 = time2stamp(); 
  <br>alert("  ：" + (t2 - t1) + "   "); 
  <br>} 
  <br> 
  <br>//-------------------------------------------------------- 
  <br>createTable(1000); //        
  <br>// --> 
  
 
  
 
 

遗憾的是，我们 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) + "   "); 
  
} 
  
 
 

ただし、これだけでは隠し効果にはならないので、テーブルとtdをセットする必要があります.

改めてテストしてみます.千行表のある列を隠すには、15ミリ秒未満の時間しか必要ではないことが分かりました.つまり、createTable(10000)を使って万行の表を作成して、それをテストしても60ミリ秒しかかかりません.(全部私のノートの実行時間を参考にしています.実際には、ほとんどの人のパソコンの配置は私のノートより高いです.だから、時間がもっと短いです.)効率は十分に満足できます.
追加:
無常ユーザーの提案によって、colgroup処理のコードが追加されました.奇妙なことに、処理原理は完全に同じですが、colgroupを処理する時間は140ミリ秒に達しています.すなわち、倍に延長されています.原因はまだ分かりません.
完全コード:












<!-- <br>var tableRowsLen = 10000; // <br> <br>//-------------------------------------------------------- <br>// （ ） <br>function time2stamp(){var d=new Date();return Date.parse(d)+d.getMilliseconds();} <br> <br>//-------------------------------------------------------- <br>// <br>function createTable(isUseColGroup) <br>{ <br>if (isUseColGroup) // colgroup <br>{ <br>var str = "<table border=1>" + <br>"<colgroup>" + <br>"<col width=100 />" + <br>"<col width=200 />" + <br>"<col width=50 />" + <br>"<\/colgroup>" + <br>"<tbody>"; <br>} <br>else <br>{ <br>// thead <br>var str = "<table border=1>" + <br>"<thead>" + <br>"<tr>" + <br>"<th width=100>col1<\/th>" + <br>"<th width=200>col2<\/th>" + <br>"<th width=50>col3<\/th>" + <br>"<\/tr>" + <br>"<\/thead>" + <br>"<tbody>"; <br>} <br> <br>var arr = []; <br>for (var i=0; i<tableRowsLen; i++) <br>{ <br>arr[i] = "<tr><td>" + i + "1<\/td><td>" + i + "2</td><td>" + i + "3<\/td></tr>"; <br>} <br>str += arr.join("") + "</tbody><\/table>"; // join() ， <br>tableBox.innerHTML = str; // table <br>} <br> <br>//-------------------------------------------------------- <br>// / <br>function hideCol(colIdx){hideOrShowCol(colIdx, 0);} <br>function showCol(colIdx){hideOrShowCol(colIdx, 1);} <br>// - - - - - - - - - - - - - - - - - - - - - - - - - - - - <br>function hideOrShowCol(colIdx, isShow) <br>{ <br>var t1 = time2stamp(); // <br>var table = tableBox.children[0]; <br>var rowsLen = table.rows.length; <br>var lastTr = table.rows[0]; <br> <br>if (rowsLen > 1001) <br>{ <br>if (!confirm(" 1000 ， （ ）。
？")) <br>return; <br>} <br> <br>for (var i=0; i<rowsLen; i++) <br>{ <br>var tr = table.rows[i]; <br>tr.children[colIdx].style.display = isShow ? "" : "none"; <br>} <br> <br>var t2 = time2stamp(); <br>alert(" ：" + (t2 - t1) + " "); <br>} <br> <br>//-------------------------------------------------------- <br>// / - <br>function hideCol_fast(colIdx){hideOrShowCol_fast(colIdx, 0);} <br>function showCol_fast(colIdx){hideOrShowCol_fast(colIdx, 1);} <br>// - - - - - - - - - - - - - - - - - - - - - - - - - - - - <br>function hideOrShowCol_fast(colIdx, isShow) <br>{ <br>var t1 = time2stamp(); // <br>var table = tableBox.children[0]; <br>var thead = table.children[0]; // thead tbody， colgroup <br>if (thead.tagName.toLowerCase()=="colgroup") // colgroup <br>{ <br>var td = thead.children[colIdx]; <br>} <br>else <br>{ <br>// ： thead tbody ， table.children[0] tbody <br>var tr = thead.children[0]; <br>var td = tr.children[colIdx]; <br>} <br>td.style.width = isShow ? 200 : 0; <br> <br>var t2 = time2stamp(); <br>alert(" ：" + (t2 - t1) + " "); <br>} <br> <br>//-------------------------------------------------------- <br>createTable(); <br>// -->