ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript は非常に高速で、10,000 行の JavaScript スキルを使用してテーブル列を非表示/表示するのにわずか 60 ミリ秒しかかかりません。

JavaScript は非常に高速で、10,000 行の JavaScript スキルを使用してテーブル列を非表示/表示するのにわずか 60 ミリ秒しかかかりません。

WBOY
WBOYオリジナル
2016-05-16 18:54:461241ブラウズ

テーブル列を非表示にする最も一般的な方法は次のとおりです:

コードをコピー コードは次のとおりです:

td .style.display = "none";

この方法は非常に非効率です。たとえば、1000 行のテーブルの列を非表示にする場合、私のラップトップ (P4 M 1.4G、768M メモリ) で実行するには約 4000 ミリ秒かかりますが、これは耐えられないことです。たとえば、次のコード:
コードをコピー コードは次のとおりです。

< body>



>


残念ながら、Google から列を非表示にするために JavaScript を使用する このようなコードを使用する方法です。
実際、最初の行の td または th の幅を 0 に設定することで、列を簡単に非表示にすることができます。 HideOrShowCol() 関数を次のコードに変更します:



コードをコピーします コードは次のとおりです:function hideOrShowCol(colIdx, isShow)
{
var t1 = time2stamp(); //
var table = tableBox.children[0]; .rows[0] ;
tr.children[colIdx].style.width = isShow ? 200 : 0;

var t2 = time2stamp(); t2 - t1) " ミリ秒");
}


ただし、これだけでは非表示効果を実現できません。


コードをコピー

コードは次のとおりです: 🎜>

再テストの結果、1,000 行のテーブルの列を非表示にするのにかかる時間は 15 ミリ秒未満であることがわかりました。 createTable(10000) を使用して 10,000 行のテーブルを作成し、それをテストしたとしても、所要時間はわずか 60 ミリ秒です (すべて私のラップトップでの実行時間に基づいています。実際、あなたのコンピューター構成のほとんどは私のものよりも優れています)。ノートの方が背が高いので時間は短くなります)、効率は非常に満足です。
補足:
Wu Chang ネットユーザーの提案に従って、colgroup 処理のコードが追加されました。奇妙なのは、処理原理はまったく同じであるにもかかわらず、colgroup の処理時間が 2 倍の 140 ミリ秒に達していることです。理由は不明です。
完全なコード:
コードをコピー コードは次のとおりです:









< ;/div>


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。