プロが教えるわが家の防犯対策術！

javascript クリックすると、あるテーブルのセルの色を複数個所変化させたい

解決済

  • 質問者：yuzuru0024
  • 質問日時：
  • 回答数：3件

ある、場所をクリックすると、
あるテーブルのセルの背景色が変わるというものを作っています。

特定の場所を変化させるには”all()”を使うと知り
javascript には、ある場所をクリックすると

document.all('td01').style.backgroundColor='#44EE77';

というような処理をさせることにしました。
すると
<td id="td01"></td>
と記述した部分はちゃんと色が変わったのですが、
複数のセルの色を変える必要がある部分があり
複数にわたって
<td id="td01"></td>
<td id="td01"></td>
というようにtd01を指定すると、やはりエラーが起こりました。
その後、いろいろ調べてみたのですが、
最初に書いたような背景色を変化させる処理を
複数個所に渡って指定するという方法が分かりません。
どうすれば、複数個所の色を変えることができるのでしょうか？

通報する

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

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

＞ある、場所をクリックすると、


＞あるテーブルのセルの背景色が変わるというものを作っています。
＞複数のセルの色を変える必要がある部分があり

クリックする場所が一箇所なのか、複数個所なのか不明ですが、とりあえずボタンにしてあります。
色分けしたいセルをグルーピングしておいて、色を変えるサンプルです。
グループは複数あっても可。HTML内に書くと一つのセルが複数のグループに属した場合面倒なので、スクリプト内でグループを定義しています。
（colspanやrowspanで連結している場合までは配慮していません。）

<html>
<head>
<style type="text/css">
td {width:50px; height:50px; text-align:center;}
</style>
<script type="text/javascript">
var gr=[];
gr[1]="yellow,1/1,2/2,3/3,4/4"; //◆Group1 色,行/列,行/列…
gr[2]="red,1/4,2/3,3/2,4/1"; //◆Group2 色,行/列,行/列…

function test(n) {
var tbl=document.getElementById('table1');
var g=gr[n].split(',');
var td=tbl.getElementsByTagName('TD');
for (var i=0; i<td.length; i++) td[i].style.backgroundColor='';
var tr=tbl.getElementsByTagName('TR');
for (i=1; i<g.length; i++){
var rc=g[i].split('/');
if (tr[rc[0]-1]){
td=tr[rc[0]-1].getElementsByTagName('TD');
if (td[rc[1]-1]) td[rc[1]-1].style.backgroundColor=g[0];
}
}
}
</script>
</head>
<body>
<table id="table1" border=1>
<tr><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td></tr>
<tr><td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td></tr>
</table>

<p><button onclick="test(1)">グループ1変更</button>
　<button onclick="test(2)">グループ2変更</button>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

通報する
お礼日時：2009/10/07 12:08

No.2

  • 回答者： OKbokuzyo
  • 回答日時：

id属性値は一意にしなければなりません。



document.all()は特定のブラウザでは動作しません。
使うならdocument.getElementById()を使用するべきです。

やり方は色々ありますし、実装方法は必要とする要件にもよりますが、
簡単な例を挙げれば、Tableにidをつけて辿る方法などがあります。

<table id="table01">
<tr>
<td></td>
<td></td>
</tr>
</table>

var tblObj = document.getElementById("table01");
var tdList = tblObj.getElementsByTagName("TD");
for (var i = 0, intSize = tdList.length(); i < intSize; i++ ) {
tdList[i].style.backgroundColor = '#44EE77';
}

しかし、本来style属性はcssに記述し、class属性を設定することが一般的です。
なおかつ、class属性はid属性と違って重複して指定できる（当前ですが）ので、
質問者様の詰まった問題も同時に解消できます。

--- css ---
td.Normal {background-color: #FFFFFF}
td.chgColor{background-color: #44EE77}

--- html ---
<table>
<tr>
<td class="Normal"></td>
<td class="Normal"></td>
</tr>
</table>

--- javascript ---
var tdList = document.getElementsByTagName("TD");
for (var i = 0, intSize = tdList.length(); i < intSize; i++ ) {
if (tdList[i].className == "Normal")
tdList[i].className = chgColor;
}
}



注意：時間が無かったのですべて未検証です
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

通報する
お礼日時：2009/10/07 12:07

No.1

  • 回答者： neko-ten
  • 回答日時：

IDが重複しているのでエラーが出ています。


複数の要素に、同一のID割り振りができないのです・・・。

今回の場合、それぞれの要素には別のID割り振りをしなければいけないので、簡単に言うと
document.all('指定するID').style.backgroundColor='#44EE77';
を、背景を変更したいすべての要素に対して行うことになります。
そのまま行うと同じ構文をたくさん書くことになるので、再帰処理を使うと楽かもしれません。

変更したいセルのIDを配列に格納します。

cells = new Array("td1","td3","td5"); ←背景変更したいセルのIDを羅列
for(var i in cells){
document.all.item(cells[i]).style.backgroundColor="#44EE77";
}

このスクリプトで一応動作確認できました。
お試しいただければ幸いです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

通報する
お礼日時：2009/10/07 12:08

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

Q質問する（無料）

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

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

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

Q質問する（無料）

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

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

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

おすすめ情報