- ベストアンサー
javascript クリックすると、あるテーブルのセルの色を複数個所変化させたい
ある、場所をクリックすると、 あるテーブルのセルの背景色が変わるというものを作っています。 特定の場所を変化させるには”all()”を使うと知り javascript には、ある場所をクリックすると document.all('td01').style.backgroundColor='#44EE77'; というような処理をさせることにしました。 すると <td id="td01"></td> と記述した部分はちゃんと色が変わったのですが、 複数のセルの色を変える必要がある部分があり 複数にわたって <td id="td01"></td> <td id="td01"></td> というようにtd01を指定すると、やはりエラーが起こりました。 その後、いろいろ調べてみたのですが、 最初に書いたような背景色を変化させる処理を 複数個所に渡って指定するという方法が分かりません。 どうすれば、複数個所の色を変えることができるのでしょうか？
- yuzuru0024
- お礼率86% (557/646)
- JavaScript
- 回答数3
- ありがとう数7
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＞ある、場所をクリックすると、 ＞あるテーブルのセルの背景色が変わるというものを作っています。 ＞複数のセルの色を変える必要がある部分があり クリックする場所が一箇所なのか、複数個所なのか不明ですが、とりあえずボタンにしてあります。 色分けしたいセルをグルーピングしておいて、色を変えるサンプルです。 グループは複数あっても可。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>
その他の回答 (2)
- OKbokuzyo
- ベストアンサー率43% (130/296)
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; } } 注意：時間が無かったのですべて未検証です
お礼
回答ありがとうございます。
- neko-ten
- ベストアンサー率55% (1287/2335)
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"; } このスクリプトで一応動作確認できました。 お試しいただければ幸いです。
お礼
回答ありがとうございます。
お礼
回答ありがとうございます。