テーブル内の行を選択すると背景色を変更する方法

HTML内のTableタグで表を作成した際に、表の行をクリックすると1行の背景色が変更する方法について記載します。

Javascriptを使って背景色を流動的に変更

HTMLは静的なページを作成します。マウスなどの動作によりページの内容を動的に変更するためにはJavascritpを利用しましょう。

Javascritpの記載内容

Javascritpを使って背景色を変更するプログラムを記載します。

// 背景色を変更するプログラム
function Click_Sub(obj) {
        // 背景色を黄色に設定
	var bg_color_tmp = "rgb(255, 255, 0)";
	if(obj.style.backgroundColor==bg_color_tmp) {
                // 背景色が黄色の場合は白色にする
		obj.style.backgroundColor='#ffffff';
	} else {
                // 背景色が黄色以外の場合（白色）は黄色にする
		obj.style.backgroundColor=bg_color_tmp;
	}
}

処理内容の解説

//：スラッシュ2本はコメントとなります。コメント定義されたところは処理せずスキップします。またプログラムだけではどのような処理であるかわかりにくい場合もありますのでコメントを使って具体的な処理を書いておくことで保守性が高いプログラムとなります。

Click_Sub：これは実行するJavascriptのファンクション名となります。ファンクション名はプログラムの名前だと思ってください。

obj：背景色を変える行のオブジェクト情報になります。

var bg_color_tmp：Javascriptの変数定義です。ここに所定の文字列や情報を格納することができます。

rgb(255, 255, 0)：色の指定です。背景色に設定したい色を定義します。色はRGBで定義する必要があります。※16進数でも定義は可能ですが、backgroudcolorを取得するとRGBなのでRGBで定義した方が色の定義が少なくて済みます。

if(obj.style.backgroundColor==bg_color_tmp) {：指定したオブジェクトの背景色が定義したと同じであれば・・・という条件分岐の処理となります。

obj.style.backgroundColor=’#ffffff’;：指定したオブジェクトの背景色を白色に変更します。指定した色に変更した後でも同行をクリックしたときは元の色に戻する必要があります。（戻さないと1度クリックした場合ずっと黄色のままとなってしまう）

} else {：上記以外という条件になります。elseがないと条件分岐をすり抜ける可能性があります。すり抜けるとどの条件にも属さず処理がされないまま後続処理が実行されてしまうので、条件分岐処理であるif分を使う際には最後elseを使うようにしましょう。

obj.style.backgroundColor=bg_color_tmp;：指定したオブジェクトの背景色を黄色に変更します。bg_color_tmpには黄色である「rgb(255, 255, 0)」が定義されているので、bg_color_tmpは黄色の情報を保有しておりそのまま背景色として利用することができます。

Javascriptの記載は以上となります。続いてHTMLの定義になります。

HTMLの記載内容

HTMLには背景色を変更したTRタグにJavascriptを呼び出すよう定義します。

<TABLE>
    <tr onclick="Click_Sub(this);">
        <td>hoge1</td>
    </tr>
    <tr onclick="Click_Sub(this);">
        <td>hoge2</td>
    </tr>
</TABLE>

処理内容の解説

<tr onclick=”Click_Sub(this);”>：今回は行の背景色を変更するということで、TRタグにイベントを追加します。onclickとはマウスでクリックされた時というイベントになります。その際にClick_SubというJavascriptのプログラムを実行するという記載になります。括弧内のthisとはこのオブジェクト情報を引数として渡すという記載です。

つまり記載の処理は『この行をマウスでクリックするとClick_Subというプログラムを実行する』となります。Click_Subは先ほどJavascriptの処理で解説した通り背景色を黄色や白色に変更するものとなります。

まとめ

HTMLだけでは静的なページしか作成できませんが、Javascriptを利用することで動的なページにすることができます。背景色の変更以外にも文字を変更したり、メッセージを表示したり色んな事ができますのでWebページ制作にはJavascriptは必須スキルになるかなと思います。