• ベストアンサー

javascriptでセルを矩形で選択する

いつもお世話になっております。 今回はjavascriptでセルを矩形に選択する方法を調べております。 現在はhttp://okwave.jp/qa3659173.htmlにあるようなもので □□□□□　このように始点から終点までを塗りつぶしています。 □■■■■ ■■■■□ □□□□□ これを以下のようにしたいです。 □□□□□　 □■■■□ □■■■□ □□□□□ 始点と終点で囲まれた矩形にしたいですが、テーブルのIDを使っているので現状では無理と思っていますがどうなのでしょうか？ 何か方法がありましたらご教授願います。

回答 全件
ベストアンサー
<html> <head> <style type="text/c…
こんな感じですか？ HTMLは、「http://okwave.jp/…

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

  • ベストアンサー
  • arexis
  • ベストアンサー率66% (66/99)
回答No.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のセルがあってもマウスを動かす範囲が少なければ軽いはずです。

iec1128
質問者

お礼

ご回答ありがとうございます。 丁寧なサンプルつきでありがとうございます。 これを参考に自分のやりたいようにカスタムしていきたいと思います。 今回はありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • HIRSYU
  • ベストアンサー率51% (45/87)
回答No.1

こんな感じですか？ 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; }

iec1128
質問者

お礼

ご回答ありがとうございました。 動きは期待したようになっておりました。 これを参考により自分に必要なようしていきたいと思います。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

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

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

  • 複数のテーブルにjavascriptを使いたい

    いつもお世話になっております。 今回はテーブルについてお聞きしたいです。 http://okwave.jp/qa3659173.htmlにあるようなテーブルに対する javascriptですがこのソースにテーブルをもうひとつ加えると もうひとつのほうはまったく反応しません。 idが同じだからなど考えられる対処として 変数のみ違うスクリプトを作ってみたりなどいろいろ試してみましたが どちらか片方しか動きません。 これを両方のテーブルで動かす方法はありませんか？ ご教授お願いします。 変数のみ違うスクリプトを作ってみたりなど

  • ＩＥで矩形選択

    ＩＥで矩形選択 ＩＥで表の一部の行や列のみを選択してエクセルに貼り付けたいと考えています。 （ドラッグすると全ての行・列の文字が選択されてしまいます） 文字数が一定ではないので、Terapad等に貼り付けてからの矩形削除も手間がかかります。 以前このサイトでFirefoxでの方法として下記に回答がありましたが、 http://okwave.jp/qa/q3656537.html バージョンが古くなってしまったようで使えません。 良い方法をご存知であれば、教えてください。

  • WinShotの矩形範囲指定が出来ません

    WinShotで『矩形範囲指定→JPEGで保存』を選択すると画面に赤い枠が出てきます。通常だと１度目のクリックで始点を決定し、２度目のクリックで終点を決定できるはずなのですが、１度クリックしただけで確定してしまい、保存先が表示されてしまいます。 対処方法をご存知の方いらっしゃいましたら、よろしくお願いします。

  • SPメールでテキスト選択範囲を削除する方法

    以前の質問 http://okwave.jp/qa/q7719108.html について… SPメールでテキスト選択範囲を削除する方法が分からず 困っている方が私の周りにも結構いますので 私なりの方法を示します。 (1) IME（日本語入力システム）を起動させる。 (2) [編集] → [全選択] をクリックする。 (3) 選択したい文字列の 始点／終点 をクリックする。 この時 既に全選択されているが無視して 始点／終点 を指定する。 (4) IME の backspaceキー で削除する。 これ以外にも もっと簡単な方法があるよ！と云う方は 是非 御教示ください。

  • AutoCADで選択が出来ない

    AutoCADLT2002です。 囲ってオブジェクトを選択するとき、囲む始点がビュー範囲から 外れた場合(始点を決めてから終点を決める間にビュー拡大や ビュー移動をして始点が画面から外れた場合)、 ビューから外れて囲っていたオブジェクトは選択出来ません。 これを選択出来る様にする方法はありますか？ 説明が下手ですが、宜しくお願い致します。

  • エクセル　セルの選択の方法

    お世話になります。 簡単な質問かもしれませんがよろしくお願いいたします。 オートSUM等でも何でも構わないのですが、あるセルを始点にして、そのセルのある行（または、列）の最終セルまで一括で選択する場合はどのような値を設定るれば良いのでしょう？？ 以下のようなことです。 =SUM(A5,A○) A○　の部分にはどのような値が入るのでしょう？ よろしくお願いいたします。

  • エクセルVBA・セルを選択して並べ替えたい

    エクセルVBA・セルを選択して並べ替えたい 以下の質問では、たいへんお世話になりありがとうございました。 http://okwave.jp/qa/q6203452.html 少し関連した質問をいたします。 具体的に言いますと、マウスでセル範囲を選択して、その選択した範囲を並べ替える、というようなイメージです。（マウスでセル範囲を選択してから、マクロを実行します） 以下のコードで言うと Range("○●:○●").の部分が、マウスで選択した範囲というような具合です。 Sub sort1() Range("○●:○●").Sort _ Key1:=Range("d1"), _ Order1:=xlDescending, _ Header:=xlYes, _ Orientation:=xlTopToBottom End Sub 以上、よろしくご教示お願いします。

  • GIMPで描画した矩形を移動したい

    GIMP（2.6.4）で画面のキャプチャー（PNG)に説明文を入れる作業をしています。 矩形選択後、 選択範囲の境界線を描画 ⇒ ストローク として、矩形（四角形）を描画するまではいいのですが、その描画した矩形の位置やサイズを調整したいのですが、どのようにすればいいか分かりません。 基本的な事で申し訳ございませんが、手順、もしくはこのような操作方法が分かるサイトをご存知でしたら、教えてください。 そもそもストローク描画ではできない場合、その他の方法があればご教授下さい。 よろしくお願いいたします。

  • JavaScriptで画像から選択肢へ切り替え

    JavaScript全くの初心者です。よろしくお願いします。 パナソニックさんのホームページ（http://panasonic.jp/）の様に、 最初に写真が表示されていて、mouseoverで選択肢が現れる、 と言ったページが作りたいのです。 フラッシュが使われていますが、画像で作りたいです。 勉強を始めましたが、画像と内容文への入れ替え方法は見つからず悩んでいます。 JavaScript記述して頂ける方いらっしゃいましたら、宜しくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する