テーブルの列にクラス名を付けて背景色を変更
object.className=object.cellIndex
| 道府県 | 県庁所在地 | 人口 |
|---|---|---|
| 北海道 | 札幌 | ５５０万人 |
| 大阪府 | 大阪 | ８８６万人 |
| 兵庫県 | 神戸 | ５５９万人 |
同じ列のセルには同じインデックス番号が振られます。
上記の表では道府県の列のセルは０、県庁所在地は１、人口は２、になります。
＊ただしセル結合がされている場合は除く
これを利用して同じセルインデックス番号の'th','tｄ'要素に同じクラス名を付け
背景色の変更を実行します。
サンプルソース
<html>
<head>
<title>javascript テーブルの列の背景色、変更</title>
<style type="text/css">
<!--
#myTBL{
border-collapse: collapse; /*枠線 collapse（重ねて表示 一本線）*/
color : black; /*テーブルの文字色*/
background-color : #cceeff; /*テーブルの背景色*/
}
#myTBL th{
color : blue; /*見出しセルの文字色*/
background-color : gold; /*見出しセルの背景色*/
width :130px; /*セルの幅*/
}
#myTBL td{
/* background-color : #cceeff; 'td'要素に背景色は設定しない */
}
/* javascriptで付加するクラス名 */
.cellIDX0{
background-color : pink;
}
.cellIDX1{
background-color : yellow;
}
.cellIDX2{
background-color : lightgreen;
}
-->
</style>
<script type="text/javascript">
<!--
var num = 0;
function cellINX(){ num ^= 1;//トグルスイッチ 0と1の切り替え ^ 排他的論理和
// ID名がmyTBLであるテーブルのオブジェクトを取得。
var Tbl=document.getElementById("myTBL");
//rowsコレクションで行を参照する。 テーブル内のtrをループ。
for(var i=0;i< Tbl.rows.length;i++){ //length:エレメントの数を返す。
// tr内のtdをループする。セルへの参照はrowsのcellsコレクション。
for(var j=0;j< Tbl.rows[i].cells.length;j++){
if(num == 1){//numが１ならクラス名を付加０なら削除
Tbl.rows[i].cells[j].className="cellIDX"+Tbl.rows[i].cells[j].cellIndex;}
else{Tbl.rows[i].cells[j].className="";}
}
}
}
//-->
</script>
</head>
<body>
<table id="myTBL" border="1" cellpadding="5">
<tr><th>道府県</th><th>県庁所在地</th><th>人口</th></tr>
<tr><td>北海道</td><td>札幌</td><td>５５０万人</td></tr>
<tr><td>大阪府</td><td>大阪</td><td>８８６万人</td></tr>
<tr><td>兵庫県</td><td>神戸</td><td>５５９万人</td></tr>
</table>
<p><input type="button" value="セルのインデックス番号でクラス名を付加/削除。"
onclick="cellINX()" /></p>
</body>
</html>
object.cellIndex=値
セルのインデックス値はrows、cells コレクション、Table cellIndexプロパティ、セルのインデックス値の取得をご覧ください。
object.className='クラス名'；クラス名設定、削除
Tbl.rows[i].cells[j].className="cellIDX"+Tbl.rows[i].cells[j].cellIndex;上記のコードはテーブルの
[i]行の[j]番目のセルに文字列 "cellIDX"+cellIndex番号 でクラス名を付けています。
cellIndex番号は'0'から始まります。Tbl.rows[i].cells[j].className="";でクラス名を削除します。サンプルの表では 一列目の各セルは
'cellIDX0'、二列目の各セルは 'cellIDX1'三列目の各セルは
'cellIDX2' とクラス名が付きます。スタイルシートにはこの三ツのセレクタと
background-colorプロパティを書いておきます。
id セレクタは class セレクタよりも優先されます。
idSpanの背景色には'pink'が cellIDX2には'lightgreen'が設定されています。
<span id="idSpan" class="cellIDX2">javascriptサンプル</span>
javascriptサンプル ：idセレクタが優先されclassセレクタは反映されません。
<span class="cellIDX2">javascriptサンプル</span>
javascriptサンプル ：idを削除しました。#myTBL td{
/* background-color : #cceeff; 'td'要素に背景色は設定しない */
}
上記のidセレクタ (#myTBL td)に背景色を設定すると後からクラス名を各'th','td'要素に付けてもidセレクタが優先されるのでclassセレクタの背景色は反映されず
スクリプトを実行しても背景色は変わりません。
#myTBL th セレクタにはbackground-color : gold;が設定してあるので見出しセルの背景色はそのままです。
さくらのレンタルサーバ スタンダード
Table cellIndexプロパティ、セルのインデックス値の取得
HTML DOM Table rows,cellsコレクション
テーブルの行、表示/非表示 javascript
HTML テーブル( 表 ) の作成。
テーブルの表題を固定してデータ部分だけをスクロールさせる。
テーブルの行の背景色を一行おきに変えます。
テーブルの行の文字色,背景色を変えてハイライトします。
サーバーカウボーイ
