- ベストアンサー
まとめてセルの色を変えたい
javascriptを使ってセルの色をまとめて変える方法を調べています。 たとえば下図のようなセルがあるとして (2.2)始点(4.4)終点として □□□□□□ □□□□□□ □□□□□□ □■■■■■ □□□□□□ → ■■■■■■ □□□□□□ ■■■■□□ □□□□□□ □□□□□□ と変えるようなものを作成したいと考えております。 考えている方法ですが、タグに順番にIDをつけて、始点から終点の 間の色を変えるという方法を思いついたのですが、 一度目のクリックを始点、二度目のクリックを終点と判別させることは 可能でしょうか？ もしくはドラッグしてやったほうが簡単に実現できるのでしょうか？ 以上の点、アドバイス等お願いします。
- iec1128
- お礼率43% (70/161)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
tebleは配列でのアクセスが可能なんで個別にidを付けたりする必要はないです。 http://www.doraneko.org/misc/dom10/19981001/level-one-html.html#ID-64060425 ドラッグの場合普通にやるとドラッグした部分が反転（選択）しちゃうので格好悪いかも。 サンプルにしてみたんで参考にしてください。 <html> <head> <title></title> <script type="text/javascript"> document.onclick=sample;//関数登録 //クリック位置(マイナスなら未設定) var X = -1; var Y = -1; function sample(evt){ //クリックされたTDの取得 var target = (evt)?evt.target:event.srcElement; while(target && target.tagName != 'TD') target=target.parentNode; if(!target)return;//テーブル内でのクリックではない var X2 = target.cellIndex; var Y2 = target.parentNode.rowIndex; var TABLE = target.parentNode.parentNode.parentNode; if(X<0) { // 1回目のクリック //背景色初期化 for(var y=0;TABLE.rows[y];y++) { for(var x=0;TABLE.rows[y].cells[x];x++) { if(TABLE.rows[y].cells[x].style) TABLE.rows[y].cells[x].style.backgroundColor=''; } } //クリック位置記憶＆仮色づけ X = X2; Y = Y2; TABLE.rows[Y].cells[X].style.backgroundColor='#00c'; } else { // 2回目のクリック if(Y>Y2 || Y==Y2 && X>X2){ // 上→下になるよう、位置情報入れ替え var tmpY = Y; Y = Y2; Y2 = tmpY; var tmpX = X; X = X2; X2 = tmpX; } while(1){ //上→下に向かって色付け TABLE.rows[Y].cells[X].style.backgroundColor = '#ccc'; if(X == X2 && Y == Y2) break; if(++X >= target.parentNode.cells.length) { X = 0; Y++; } } X = -1; Y = -1; } } </script> </head> <body> <table border="1"> <tr><td>◆</td><td>◆</td><td>◆</td><td>◆</td></tr> <tr><td>◆</td><td>◆</td><td>◆</td><td>◆</td></tr> <tr><td>◆</td><td>◆</td><td>◆</td><td>◆</td></tr> <tr><td>◆</td><td>◆</td><td>◆</td><td>◆</td></tr> </table> </body> </html>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
ざっと書いてみました。 こまかいバグがあるかとは思いますがご自身でなおしてみてください <style> #colorchange{ border-collapse:collapse; } #colorchange td{ border:1px solid #000; width:20px; height:20px; } </style> <script> window.onload=function(){ var t=document.getElementById("colorchange"); t.start=0; t.flg=false; var tds=t.getElementsByTagName("td"); var l=tds.length; for(var i=0;i<l;i++){ tds[i].count=i; tds[i].onclick=function(){ if(!t.flg){ t.start=this.count; for(var j=0;j<l;j++){ tds[j].style.backgroundColor=""; } }else{ for(var j=0;j<l;j++){ if(j>=t.start && j<=this.count || j<=t.start && j>=this.count) tds[j].style.backgroundColor="#ffc0c0"; } t.start=0; } t.flg=t.flg?false:true; } tds[i].onmouseover=function(){ if(!t.flg) return false; for(var j=0;j<l;j++){ if(j>=t.start && j<=this.count || j<=t.start && j>=this.count) tds[j].style.backgroundColor="#c0ffc0"; } } tds[i].onmouseout=function(){ if(!t.flg) return false; for(var j=0;j<l;j++){ if(j>=t.start && j<=this.count || j<=t.start && j>=this.count) tds[j].style.backgroundColor=""; } } } } </script> <table id="colorchange"> <tbody> <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr> </tbody> </table>
お礼
サンプルをありがとうございました。 期待した動作を確認しました。 中身が理解できるよう勉強していきたいと思います。
お礼
わかりやすい説明ありがとうございました。 期待した動作をしました。 >>tebleは配列でのアクセスが可能なんで個別にidを付けたりする必要はないです。 知りませんでした。まだまだ初心者ですがこれから習得していきたいと思います。