システム関連/JavaScript/便利なライブラリ/テーブルのセルをハイライト
Last-modified: 2022-05-05 (木) 09:23:35
テーブルのセルをハイライト - Tablecloth†
サンプル†
- http://180xz.com/other/js/tablecloth/tablecloth.html
（行列ともにハイライト 選択セルの行列の色変え有） - http://180xz.com/other/js/tablecloth/tablecloth.css
使い方†
- tablecloth.js
スクリプトの最初の方にCONFIGがあります。 true か false を設定します。 // テーブルの列をハイライト表示するかどうか var highlightCols = true; // テーブルの行をハイライトするかどうか var highlightRows = true; // 対象のセルをクリックした時にクリックしたセルの行列の色を変えるかどうか var selectable = true;
- cssの設定（サンプルでの設定例）
データセルの表示をみやすい様に奇数行と偶数行で色違いにできる。 /* データセル（奇数行） */ tr.even td {background:#EFF;} /* データセル（偶数行） */ tr.odd td {background:#DFF;} /* マウスオーバー */ th.over, tr.even th.over, tr.odd th.over {background:#39C;} td.over, tr.even td.over, tr.odd td.over {background:#FFC;} /* クリック（ボタンダウン） */ td.down, tr.even td.down, tr.odd td.down{background:#339;color:#FFF;} /* 選択された項目 */ td.selected, tr.even td.selected, tr.odd td.selected{background:#CFC;} /* 空のセルの背景 */ th.empty,td.empty, tr.odd td.empty, tr.even td.empty{background:#FFF;}