HTMLのテーブルの行数が多くなると処理速度が遅くなります

質問

テーブルに7,000件ほどのデータを表示します。

行をクリックしたら、行の背景色とフォントカラーを変更させて、
選択状態風にみせるために、JavaScriptを作成しました。

動作はするのですが、クリックしてから色が変更されるまでに7、8秒かかってしまいます。
テーブルの行数が多い場合は仕方ないのでしょうか？
処理速度を改善するためにはどうすればいいのか教えてください。
よろしくお願いします。

1件目のデータをあらわすHTMLはこうなります。1件のデータを2段(2行)にわけています。
<TBODY name=tb1 id=tb1 ・・・　OnClick="rowClick(1);">
　　　<TR rowspan=2>
　　　・・・<データ内容1/2>・・・
　　　</TR>
　　　<TR>
　　　・・・<データ内容2/2>・・・
　　　</TR>
</TBODY>
7,000件目だとOnClick="rowClick(7000);"となります。

<SCRIPT language="JavaScript"><!--

　　　var selindex=0;

　　　function rowClick(index){
　　　　　　if(selindex==index)return;

　　　　　　//色を変更
　　　　　　document.all.tb1[index-1].className="selcolor";

　　　　　　//前回クリックした行
　　　　　　if(selindex!=0){
　　　　　　　　　//色を元に戻す
　　　　　　　　　document.all.tb1[selindex-1].className="rowcolor_white";
　　　　　　}

　　　　　　//クリックした行を記憶
　　　　　　selindex=index;
　　　}
//--></SCRIPT>

回答No.1

himajin100000 · ベストアンサー

>動作はするのですが、クリックしてから色が変更されるまでに7、8秒かかってしまいます。
確認はしていませんが,可能性はあります。

ところで,7000行は閲覧者としてページを見るのも大変です。
サーバ側で100件ずつとか区切ってページを表示し,「次へ」とか「前へ」とか
「5000-5100」みたいなリンク,できれば検索機能を用意してもらえると幸いです。

この場合,行数が少なくなるので問題は自動的に消滅しますよね？
それとも分割できないようなものなのでしょうか？

お礼

回答ありがとうございました。
100件ずつ区切るのは良さそうですね。やってみます。

回答No.2

issa_srv

14000箇所のスタイル変更処理を行えば、遅くなるのは当然です。
本来の用途から外れてしまうかもしれませんが、縦に長いテーブルを複数並べて、
一つのテーブルに見せかけるのはどうでしょうか？

カラムに対応したテーブルの背景色を変えることで、スタイル変更処理は2回で済むはずです。

または、100件程度表示したテーブルを70個作成して、リンクからCSSで表示非表示を切り替えるのが現実的だと思います。
このパターンだとスタイル変更処理は200箇所で済みます。

お礼

回答ありがとうございます。

>14000箇所のスタイル変更処理を行えば、遅くなるのは当然です。
テーブルの行数が多い場合は仕方ないのですね。
100件づつにわけてテーブルの表示を切り替えるようにしたら、2秒ほどで行の色が変わるようになりました。

>縦に長いテーブルを複数並べて、
>一つのテーブルに見せかけるのはどうでしょうか？
この方法も試してみようと思います。どうもありがとうございました。