ベストアンサー

まとめてセルの色を変えたい

2007/11/20 22:32

javascriptを使ってセルの色をまとめて変える方法を調べています。たとえば下図のようなセルがあるとして (2.2)始点(4.4)終点として　□□□□□□　　　□□□□□□ 　□□□□□□　　　□■■■■■ 　□□□□□□　→　■■■■■■ 　□□□□□□　　　■■■■□□ 　□□□□□□　　　□□□□□□ と変えるようなものを作成したいと考えております。考えている方法ですが、タグに順番にIDをつけて、始点から終点の間の色を変えるという方法を思いついたのですが、一度目のクリックを始点、二度目のクリックを終点と判別させることは可能でしょうか？もしくはドラッグしてやったほうが簡単に実現できるのでしょうか？以上の点、アドバイス等お願いします。

iec1128
お礼率43% (70/161)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

steel_gray
ベストアンサー率66% (1052/1578)

2007/11/21 10:39 回答No.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>

質問者

お礼 2007/12/01 21:48

わかりやすい説明ありがとうございました。期待した動作をしました。 >>tebleは配列でのアクセスが可能なんで個別にidを付けたりする必要はないです。知りませんでした。まだまだ初心者ですがこれから習得していきたいと思います。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

yambejp
ベストアンサー率51% (3827/7415)

2007/11/21 10:36 回答No.1

ざっと書いてみました。こまかいバグがあるかとは思いますがご自身でなおしてみてください <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>

質問者