プロが教える店舗＆オフィスのセキュリティ対策術

チェックボックスにチェックがはいるとテーブルのセル背景色が変更する

締切済

  • 質問者：gohan_gohan
  • 質問日時：
  • 回答数：6件

javascriptはカスタマイズもままならないくらいの無知なのですが、検索してもどうしてもわからず、お教えいただけたらと思いご質問いたします。

題名の通り、項目にそれぞれチェックボックスまたはラジオボタンがあり、
チェックされると、そのテーブルの行（ｔｒ）の背景に色を付けたいのです。
（yahooメールやgmailのようなものです）

参考になりそうなものを検索しては見るのですが、どうしてもカスタマイズでつまづいてしまいます。
例えば、以下のページでは、変更する指定がidであったため出来ませんでした。
http://homepage2.nifty.com/godakaz/laboratory/ba …
（同じ色を複数箇所で変更できるようなものがよいです）

または、
http://javascript.style-mods.net/dhtml/dhtmltips …
こちらのページはfirefox（win）で実現できていないようで。。

どのようにすればできるでしょうか？
どうぞどうか何卒よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.1

  • 回答者： _pipi_
  • 回答日時：

<html>


<head><style>
.red{background-color:#d00} .def{background-color:#ddf}
</style></head>
<body>
<table border="1">
<tr class="def"><td><input type="checkbox" onClick="setTR('red')"></td><td>abc</td>
<tr class="def"><td><input type="checkbox" onClick="setTR('red')"></td><td>def</td>
<tr class="def"><td><input type="checkbox" onClick="setTR('red')"></td><td>hgi</td>
</table>
<script>
function setTR(c){
eob = event.srcElement; obj = parentSearch(eob,'TR'); obj.className=(eob.checked)?c:'def';
}
function parentSearch(o,t){while(o.tagName!=t)o=o.parentNode;return o;}
</script>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答大変ありがとうございました！
IE6（win）では動いたのですが、firefox（win）で出来ないようでした。。
出来ればfirefoxでも見られる方がいいです。

通報する
お礼日時：2008/03/09 21:40

No.2

  • 回答者： arexis
  • 回答日時：

<script>


window.onload = function(){
document.getElementById('table1').onclick = function(e){
var el = window.event? event.srcElement : e.target;
if(el.type != 'checkbox'){ return false; }
var tr = el;
while(tr){
if(tr.tagName == 'TR'){ tr.style.backgroundColor = el.checked ? "#cc0000" : "#ffffff"; break; }
tr = tr.parentNode;
}
}

}
</script>
<table id="table1">
<tr><td><input type="checkbox"></td><td>aaaaaa</td><td>111111</td></tr>
<tr><td><input type="checkbox"></td><td>bbbbbb</td><td>222222</td></tr>
<tr><td><input type="checkbox"></td><td>cccccc</td><td>333333</td></tr>
<tr><td><input type="checkbox"></td><td>dddddd</td><td>444444</td></tr>
</table>

window.onload を他に使っていて書換えが難しいなら
onlick イベントハンドラを テーブルタグに書く方法↓で。

<script>
function ChgTR(e){
var el = e.target || e.srcElement;
if(el.type != 'checkbox'){ return false; }
var tr = el;
while(tr){
if(tr.tagName == 'TR'){ tr.style.backgroundColor = el.checked ? "#cc0000" : "#ffffff"; break; }
tr = tr.parentNode;
}

}
</script>

<table id="table1" onclick="ChgTR(event)">
<tr><td><input type="checkbox"></td><td>aaaaaa</td><td>111111</td></tr>
<tr><td><input type="checkbox"></td><td>bbbbbb</td><td>222222</td></tr>
<tr><td><input type="checkbox"></td><td>cccccc</td><td>333333</td></tr>
<tr><td><input type="checkbox"></td><td>dddddd</td><td>444444</td></tr>
</table>


どちらのサンプルもテーブルのIDは table1。
色の部分は自分で好きなように変更。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答大変ありがとうございます！
大項目によってテーブルが複数あるので、テーブルにIDを指定することが出来なかったので、下のサンプルで出来ました！
しかしながら…実は、「チェックボックス」と「ラジオボタン」が混在していまして、どちらもチェックされた項目のセル背景を変更したいでのです。。
スクリプトのcheckboxをradioに変えてもだめなようです。。
どうしたらよいでしょうか…

通報する
お礼日時：2008/03/09 21:54

No.3

  • 回答者： arexis
  • 回答日時：

そのラジオボタンの動きについて



複数に同じnameがついていて、その中からの単一選択でチェックが移動する普通の使い方？
この場合、チェックが外れた所を元の色に戻す？


それともチェックボックスと同じ動きで、1個に1個のnameで、チェックが付いてる物をクリックすとチェックが外れるとか？


ラジオボタンはチェックボックスと動きが違うので、その辺の実際の目的の動作をかいてください^^；
    • good
    • 1
    • 件
通報する

No.4

  • 回答者： leap_day
  • 回答日時：

こんにちは



＞複数ヶ所で変更したい
id指定ではなく、class名指定などにすればできますよ
※inoutなどにもclass名をつけたりしていてもっと良い使い方があると思うのであまり良いサンプルとは言えませんが・・・

<script type="text/javascript"><!--

//class名を指定する為の準備//
document.getElementsByClassName = function (className) {
var i, j, eltClass;
var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all;
var objCN = new Array();
for (i = 0; i < objAll.length; i++) {
eltClass = objAll[i].className.split(/\s+/);
for (j = 0; j < eltClass.length; j++) {
if (eltClass[j] == className) {
objCN.push(objAll[i]);
break;
}
}
}
return objCN;
}

//色指定の準備//
COLOR = new Array("#ffcc00","#0044ff");

//色変更//
function ChgCol(n,i) {
if(i.checked) { col = COLOR[n]; }
else { col ="#ffffff"; }

cName = "tr"+n;
chName = "ch"+n;

obj1= document.getElementsByClassName(cName);
obj2= document.getElementsByClassName(chName);

for(i=0;i<obj1.length;i++) {
obj1[i].style.backgroundColor = col;
}

if(col == "#ffffff") {
for(i=0;i<obj2.length;i++) {
obj2[i].checked = false;
}
}

}

//--></script>
</head>
<body>

<div>
<form name="frm">
<table border="1">
<tr class="tr0">
<td>
<input type="checkbox" class="ch0" onClick="ChgCol('0',this);">
</td>
<td>青</td>
<td>青りんご</td>
</tr>
<tr class="tr1">
<td>
<input type="checkbox" class="ch1" onClick="ChgCol('1',this);">
</td>
<td>赤</td>
<td>赤とんぼ</td>
</tr>
<tr class="tr0">
<td>
<input type="checkbox" class="ch0" onClick="ChgCol('0',this);">
</td>
<td>緑</td>
<td>冬みかん</td>
</tr>
</table>
</form>
</div>


で、下のほうでFirefoxでできないのははdocument.allを使用しているからです
<script type="text/javascript"><!--
function Click_Sub(i) {
X = "x"+i;
Y = "y"+i;
if (document.getElementById(Y).checked==true) {
document.getElementById(X).style.backgroundColor='#cccccc'
} else {
document.getElementById(X).style.backgroundColor='#ffffff'
}
}
//--></script>

<table border=1 width=100%>
<tr id="x1"><td><input id="y1" type="checkbox" onclick="Click_Sub('1')">チェック<td>テキスト１
<tr id="x2"><td><input id="y2" type="checkbox" onclick="Click_Sub('2')">チェック<td>テキスト１
</table>
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： arexis
  • 回答日時：

<script type="text/javascript">


window.onload = function(){
document.getElementById('form1').reset();

}
function ChgTR(e){
var el = e.target || e.srcElement;
if(el.type == 'checkbox' || el.type == 'radio'){
function GetTR(tr){while(tr.tagName != 'TR'){ tr = tr.parentNode; } return tr; }
if(el.type == 'radio'){
var Names = document.getElementsByName(el.name);
for(var i=0; i<Names.length; i++){ GetTR(Names[i]).style.backgroundColor = "#ffffff"; } //未選択色
}
GetTR(el).style.backgroundColor = el.checked ? "#cc0000" : "#ffffff";
}
}
</script>

<form id="form1">

<table onclick="ChgTR(event)">
<tr><td><input type="checkbox"></td><td>aaaaaa</td><td>111111</td></tr>
<tr><td><input type="checkbox"></td><td>bbbbbb</td><td>222222</td></tr>
<tr><td><input name="a1" type="radio"></td><td>cccccc</td><td>333333</td></tr>
<tr><td><input name="a1" type="radio"></td><td>dddddd</td><td>444444</td></tr>
<tr><td><input name="a2" type="radio"></td><td>eeeeee</td><td>555555</td></tr>
<tr><td><input name="a2" type="radio"></td><td>ffffff</td><td>666666</td></tr>
</table>

</form>


寝るので(はやい^^；)、普通のラジオボタンと仮定して選択が移ってしまった所は元に戻すようにしたサンプルです。

それから、リロードされると背景色はデフォルトに戻ってしまいますが、フォームのチェックが残るブラウザ(Firefox)の事を考えて、
window.onload = function(){ } をつけてフォームをリセットするのもつけておきました。
フォームが複数ある場合は、同じパターンでフォームIDを指定して reset() させる記述を増やしてください。
document.getElementById('フォーム名').reset();
フォームのIDをつけるのが何らかの理由で困難な場合は、
『何個目か？』を取れるなら、その何個目(0から数える)を数字として
document.forms[番号].reset();
としてください。

他のスクリプトでwindow.onload がある場合は、そこの中に記述。
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： _pipi_
  • 回答日時：

<html>


<head><style>
.red{background-color:#d00} .def{background-color:#ddf}
</style></head>
<body>
a
<table border="1">
<tr class="def"><td><input type="checkbox" onClick="setTR(this,'red')"></td><td>abc</td>
<tr class="def"><td><input type="checkbox" onClick="setTR(this,'red')"></td><td>def</td>
<tr class="def"><td><input name="a" type="radio" onClick="setTR2(this,'red')"></td><td>ghi</td>
<tr class="def"><td><input name="a" type="radio" onClick="setTR2(this,'red')"></td><td>jkl</td>
</table>
<script>
function setTR2(o,c){
obj = document.getElementsByName(o.name);
for(i=0;i<obj.length;i++){parentSearch(obj[i],'TR').className='def';}
setTR(o,c);
}
function setTR(o,c){parentSearch(o,'TR').className=o.checked?c:'def';}
function parentSearch(o,t){while(o.tagName!=t)o=o.parentNode;return o;}
</script>
</body>
</html>
    • good
    • 1
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報