- ベストアンサー
javascriptでセルを矩形で選択する
いつもお世話になっております。 今回はjavascriptでセルを矩形に選択する方法を調べております。 現在はhttp://okwave.jp/qa3659173.htmlにあるようなもので □□□□□ このように始点から終点までを塗りつぶしています。 □■■■■ ■■■■□ □□□□□ これを以下のようにしたいです。 □□□□□ □■■■□ □■■■□ □□□□□ 始点と終点で囲まれた矩形にしたいですが、テーブルのIDを使っているので現状では無理と思っていますがどうなのでしょうか？ 何か方法がありましたらご教授願います。
- iec1128
- お礼率43% (70/161)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <style type="text/css"> #table1 { border-collapse:collapse; } #table1 td{ border:1px solid #000; width:20px; height:20px; background-color:#FFFFFF; } </style> </head> <body> <script type="text/javascript"> window.onload = function(){ var tb = document.getElementById('table1'), tds = tb.getElementsByTagName('td'); var flag = 0, sRow, sCell, sFor = 0, eFor = 0; var Col_def = '', Col_sel = '#cccccc', Col_S = '#aaaacc', Col_D = '#6666cc'; for(var i=0, k=0; i<tb.rows.length; i++){ var tbc = tb.rows[i].cells; for(var j=0; j<tbc.length; j++){ tbc[j].Rs = i; tbc[j].Cs = j; tbc[j].Old = 0; tbc[j].Current = 0; tbc[j].tnum = k++; tbc[j].onclick = function(){ if(flag){ flag = 0; sFor = 0; eFor = 0; for(var i=0; i<tds.length; i++){ if(tds[i].Current){ tds[i].style.backgroundColor = Col_S; tds[i].bgColor = Col_S; tds[i].Old = 1; } } }else{ flag = 1; sRow = this.Rs; sCell = this.Cs; sFor = this.Rs; eFor = this.Rs; } } tbc[j].onmouseover = function(){ if(flag){ var minR = Math.min(sRow, this.Rs); var maxR = Math.max(sRow, this.Rs); var minC = Math.min(sCell, this.Cs); var maxC = Math.max(sCell, this.Cs); sFor = Math.min(sFor, this.Rs); eFor = Math.max(eFor, this.Rs); var min = tb.rows[sFor].cells[0].tnum; var max = tb.rows[eFor].cells[tb.rows[eFor].cells.length-1].tnum; for(var i=min; i<max+1; i++){ if(tds[i].Rs>=minR && tds[i].Rs<=maxR && tds[i].Cs>=minC && tds[i].Cs<=maxC){ tds[i].Current = 1; tds[i].style.backgroundColor = tds[i].Old? Col_D : Col_sel; }else{ tds[i].Current = 0; tds[i].style.backgroundColor = tds[i].Old ? tds[i].bgColor : Col_def; } } } } } } document.getElementById('clear').onclick = function(){ for(var i=0; i<tds.length; i++){ tds[i].style.backgroundColor = Col_def; tds[i].Old = 0; tds[i].bgColor = ''; tds[i].Current = 0;} flag = false; } document.getElementById('newColor').onchange = function(){ Col_S = this.value; } document.getElementById('currentColor').onchange = function(){ Col_sel = this.value; } document.getElementById('doubleColor').onchange = function(){ Col_D = this.value; } } </script> <table id="table1"> <script type="text/javascript"> for(i=0; i<100; i++){ document.write('<tr>'); for(j=0; j<10; j++){ document.write('<td></td>') } document.write('</tr>'); } </script> </table> <form> 決定色<select id="newColor"> <option value="#aaaacc">デフォルト</option> <option value="blue">青</option> <option value="red">赤</option> <option value="green">緑</option> <option value="gray">灰</option> <option value="yellow">黄</option> </select> <br> 選択中<select id="currentColor"> <option value="#cccccc">デフォルト</option> <option value="red">赤</option> <option value="blue">青</option> <option value="green">緑</option> <option value="gray">灰</option> <option value="yellow">黄</option> </select> <br> 重複色<select id="doubleColor"> <option value="#6666cc">デフォルト</option> <option value="yellow">黄</option> <option value="red">赤</option> <option value="blue">青</option> <option value="green">緑</option> <option value="gray">灰</option> </select> <br> <input id="clear" type="button" value="テーブルクリア"> </form> </body> </html> 回答はいってますね^^; これ、#1さんのと結局同じなのでどうしようか迷ったけど^^; onmouseoutでの処理もmouseoverの方の処理で賄えるので同じくつけていません。 で、前回書いてあった速度の低下(特にIE)ですが、 縦軸が多くて横軸が少ない場合に限って軽くなるようにちょっと考えてました。 クリックで選択開始～マウスの動いたRowsの範囲だけのforループにしましたので、 100*10のセルがあってもマウスを動かす範囲が少なければ軽いはずです。
その他の回答 (1)
- HIRSYU
- ベストアンサー率51% (45/87)
こんな感じですか？ HTMLは、「http://okwave.jp/qa3659173.html」と同じでJavaScriptだけ修正しました。 ＃onmouseoutが無い等、元と異なる点もありますので、参考程度に利用してください。 var cellColor = "#ffc0c0"; var cellDefaultColor = "#ffffff"; // テーブル内のセルを２次元配列にする // この配列を碁盤の要領で利用する var objList = new Array(); // ドラッグ中かどうか var isDrag = false; // ドラッグ中の背景色 var dragColor = "#ffc000"; // ドラッグ開始の座標 var startX; var startY; window.onload = function(){ var x, y; var objTable = document.getElementById("colorchange"); var objTrList = objTable.getElementsByTagName("tr"); // Y軸をループ for(y = 0; y < objTrList.length; y++){ // objListを初期化していく objList[y] = objTrList[y].getElementsByTagName("td"); // X軸をループ for(x = 0; x < objList[y].length; x++){ // セルにXとYの座標を保持 objList[y][x].x = x; objList[y][x].y = y; // セルに背景色を保持 objList[y][x].color = cellDefaultColor; // クリックしたときの処理 objList[y][x].onclick = function(){ if(isDrag){ var x2, y2; for(y2 = 0; y2 < objList.length; y2++){ for(x2 = 0; x2 < objList[y2].length; x2++){ if(isSelect(objList[y2][x2], this.x, this.y)){ objList[y2][x2].style.backgroundColor = cellColor; objList[y2][x2].color = cellColor; } } } isDrag = false; }else{ // ドラッグ開始 startX = this.x; startY = this.y; isDrag = true; } } // ドラッグ中の処理 objList[y][x].onmouseover = function(){ // ドラッグ中でない場合は終了 if(!isDrag){ return; } // ドラッグ中は背景色を変更する var x2, y2; for(y2 = 0; y2 < objList.length; y2++){ for(x2 = 0; x2 < objList[y2].length; x2++){ if(isSelect(objList[y2][x2], this.x, this.y)){ objList[y2][x2].style.backgroundColor = dragColor; }else{ objList[y2][x2].style.backgroundColor = objList[y2][x2].color; } } } } } } } // 指定セルが、ドラッグの範囲かどうかを判定する function isSelect(obj, x, y){ var flgX, flgY; // 左右の判定 if(x >= startX){ flgX = (startX <= obj.x && obj.x <= x); }else{ flgX = (x <= obj.x && obj.x <= startX); } // 上下の判定 if(y >= startY){ flgY = (startY <= obj.y && obj.y <= y); }else{ flgY = (y <= obj.y && obj.y <= startY); } return (flgX && flgY); } function changeColor(obj){ var color = obj.options[obj.selectedIndex].style.backgroundColor; obj.style.backgroundColor = color; cellColor = color; }
お礼
ご回答ありがとうございました。 動きは期待したようになっておりました。 これを参考により自分に必要なようしていきたいと思います。 ありがとうございました。
お礼
ご回答ありがとうございます。 丁寧なサンプルつきでありがとうございます。 これを参考に自分のやりたいようにカスタムしていきたいと思います。 今回はありがとうございました。