JavaScript Table クリックした行の色を変える

テーブルをクリックしたとき、クリックした行の色を変えるJavaScriptプログラムです。

 

 

HTML/php

<table id="listTable">
<tr style="background-color:#dfdfdf">

<th></th>

</tr>

<?php

//dataCount行のループ

for($gyo=0; $gyo<$dataCount; $gyo++)
{

//1行づつ色を変えると帳票っぽい
if(($gyo % 2) != 0){
$bgcolor = "#efefef";
} else {
$bgcolor = "#ffffff";
}
?>
<tr bgcolor=<?php echo $bgcolor ?> onClick="trClick(this)">

<td></td>

</tr>

<?php

}

?>

</table>

 

 

テーブルをクリックするとtrClickファンクションが実行されます。


JavaScript

var oldRow;
var oldColor;

function trClick(obj)
{
var table = document.getElementById('listTable');
//テーブルがクリックされたときの処理
//行の色を変える
//クリックした行数を取得する
//alert(obj.rowIndex);
var newRow = obj.rowIndex;
//行の色を取得する
//alert(obj.bgColor);
//クリックした行の色を変える
if(newRow != oldRow)
{
if(oldRow != undefined)
{
//前の行の色を戻す
table.rows[oldRow].style.backgroundColor = oldColor;
}
//新しい行の色を取得しoldColorに保存する
oldColor = obj.bgColor;
//新しい行の色を変える
table.rows[newRow].style.backgroundColor = "#80ffff";
//新しい行の行数をoldRowに保存する
oldRow = newRow;
}
}

 

 

以上、ご利用下さい。(｡･ω･)ﾉﾞ

 

目次に戻る