【 ＨＰ作成質問箱 】

【ＨＰ作成質問箱/詳細】　一覧 / 詳細

　 No.9031　テーブルの背景色の変更

[シレン] [ブラウザ]　 07/01/30 (火) 10:14

外部スタイルシート

.ListTBL01{ background-Color:yellow }

----------------------------------------------

<TABLE border=1>
<TR>
<TD CLASS=ListTBL01 ID=ListTBLLine01>項目１</TD>
<TD CLASS=ListTBL01 ID=ListTBLLine02>項目２</TD>
<TD CLASS=ListTBL01 ID=ListTBLLine03>項目３</TD>
<TD CLASS=ListTBL01 ID=ListTBLLine04>項目４</TD>
<TD CLASS=ListTBL01 ID=ListTBLLine05><INPUT TYPE=checkbox checked NAME=ckbox ID=ckbox></TD>
</TR>
</TABLE>
---------------------------------------------------------------
上記のようなテーブルがあるとします。
今は１行ですが、テーブルはJavaScriptで作成していて
可変で何行になるかわかりません。
列は固定です。

やりたいことは、チェックボックスのチェックの有無で
テーブルの背景色を変えたいということです。
チェックボックスの有無は取得できたのですが
背景色の変更の仕方がわからないので教えていただくとありがたいです

ちなみに、全コンテンツを見て
[DHTMLサンプル＞画像クリックで背景画像の変更]
が一番近いかなと思って色々試しましたが、指定の仕方がわかりませんでした。

▼

▼

▼

　 No.9033　Re:テーブルの背景色の変更

[atom] [ブラウザ]　 07/01/30 (火) 19:39

IEに限って言えば、Javascriptでテーブルの背景色を指定する方法は

bgdec = eval("0xff0000);
window['tbl1'].style.backgroundColor = bgdec;

です。
テーブルの記述サンプルは次のようなものです。
<table id="tbl1" width="400" height="300">
<tr><td></td></tr>
</table>

▼

▼

▼

　 No.9037　Re^2:テーブルの背景色の変更

[シレン] [ブラウザ]　 07/01/31 (水) 11:28

テーブル全体が変わると困るので
サンプルを参考に下記のようにしたらできました。
大変ありがとうございました。
-----------------------------------------------------
var ElmChk = document.getElementsByName("ckbox");
var bgdec;

for (var i = 0; i < ElmChk.length; i++){

　if (ElmChk[i].checked == true) bgdec = eval("0xF0F8FF");
　else bgdec = eval("0xFFFFFF");

　for (var j = 0; j < 5; j++){
　　var ID = "a" + i + j;
　　window[ID].style.backgroundColor = bgdec;
　}
}
-----------------------------------------------------
<TABLE border=1>
<TR>
<TD ID=a00>項目１</TD><TD ID=a01>項目２</TD><TD ID=a02>項目３</TD><TD ID=a03>項目４</TD>
<TD ID=a04><INPUT TYPE=checkbox NAME=ckbox ID=ckbox></TD>
</TR>
<TR>
<TD ID=a10>項目５</TD><TD ID=a11>項目６</TD><TD ID=a12>項目７</TD><TD ID=a13>項目８</TD>
<TD ID=a14><INPUT TYPE=checkbox NAME=ckbox ID=ckbox></TD>
</TR>
</TABLE>

▼

▼

▼

　一覧 / 詳細