テーブルに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ベストアンサー
- 回答日時:
>動作はするのですが、クリックしてから色が変更されるまでに7、8秒かかってしまいます。
確認はしていませんが,可能性はあります。
ところで,7000行は閲覧者としてページを見るのも大変です。
サーバ側で100件ずつとか区切ってページを表示し,「次へ」とか「前へ」とか
「5000-5100」みたいなリンク,できれば検索機能を用意してもらえると幸いです。
この場合,行数が少なくなるので問題は自動的に消滅しますよね?
それとも分割できないようなものなのでしょうか?
No.2
- 回答日時:
14000箇所のスタイル変更処理を行えば、遅くなるのは当然です。
本来の用途から外れてしまうかもしれませんが、縦に長いテーブルを複数並べて、
一つのテーブルに見せかけるのはどうでしょうか?
カラムに対応したテーブルの背景色を変えることで、スタイル変更処理は2回で済むはずです。
または、100件程度表示したテーブルを70個作成して、リンクからCSSで表示非表示を切り替えるのが現実的だと思います。
このパターンだとスタイル変更処理は200箇所で済みます。
回答ありがとうございます。
>14000箇所のスタイル変更処理を行えば、遅くなるのは当然です。
テーブルの行数が多い場合は仕方ないのですね。
100件づつにわけてテーブルの表示を切り替えるようにしたら、2秒ほどで行の色が変わるようになりました。
>縦に長いテーブルを複数並べて、
>一つのテーブルに見せかけるのはどうでしょうか?
この方法も試してみようと思います。どうもありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- Ruby pandasでsqlite3にテーブル作成・追加・読み出しでindexの取り扱い方教えてください 5 2023/03/08 09:57
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript jsで、switch文で書かれた分をif文にできませんか。 1 2022/07/28 15:10
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
このQ&Aを見た人はこんなQ&Aも見ています
-
外出時に「待たせる妻」vs イライラする「待つ夫」は日本だけ?見習いたい海外事情
夫の家事参加に積極的なイメージのある海外でも、同様の事例はあるのか。結婚カウンセラーの佐竹悦子さんに伺ってみた。
-
クリックされたセルの位置を取得するには?
JavaScript
-
画面表示とともにtableの指定の行位置を表示
JavaScript
-
INSERT文でフィールドの1つだけを他のテーブルから取ってきた値を入れたい
その他(データベース)
-
-
4
テーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。
HTML・CSS
-
5
特定<table>内の<td>の色を変える
JavaScript
-
6
【SQL】他テーブルに含まれる値に合致する行を抽出
その他(データベース)
-
7
テーブルの任意の列を非表示にしたい
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
WORD VBA プログラム修正をお願...
-
SQLを発行とは?クエリの作成と...
-
任意の周波数の正弦波(サイン...
-
VBとアクセスでSQL文に変...
-
Excel複数シートをaccessへ一括...
-
エクセルのテーブルを解除する...
-
★クリスタルレポートの元になる...
-
ヘッダ(*.h)に定義したテーブル...
-
ExcelVBAからAccessMDB内のテー...
-
Access SQLITEのリンクテーブ...
-
AccessからExcelへエクスポート...
-
ACCESS2010 実行時エラー 2766
-
他のMDBのテーブルに追加したい
-
VBA 変数名に変数を使用したい。
-
Excel VBA で日付を4ケタの数値...
-
クリスタルレポートで困ってい...
-
VBA フォルダ内のファイルを、...
-
AccessのDAOでフィールド名を配...
-
C#で変数名の取得
-
VBScript で ADO Streamオブジ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
VBとアクセスでSQL文に変...
-
Accessで別mdbのテーブルをコピー
-
他のMDBのテーブルに追加したい
-
SQLを発行とは?クエリの作成と...
-
手動または分散トランザクショ...
-
HTMLのテーブルの行数が多くな...
-
エクセルのテーブルを解除する...
-
ExcelVBAからAccessMDB内のテー...
-
Excel複数シートをaccessへ一括...
-
DataGridの中身をDataSetにテー...
-
CSVファイルのエクスポートでソ...
-
AccessからExcelへエクスポート...
-
.net 複数の主キーを設定する方法
-
『列名 '担当者CD' があいま...
-
COBOLのINVALID KEYが理解でき...
-
アクセステーブル、リンクとロ...
-
ACCESSのテーブル名をリストに...
-
MDBテーブルへの追加変更を教え...
-
【ADO】「Execute」を使うと...
-
ACCESS2010 実行時エラー 2766
おすすめ情報