- ベストアンサー
javascriptでセルを矩形で選択する
arexisの回答
<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のセルがあってもマウスを動かす範囲が少なければ軽いはずです。
関連するQ&A
- まとめてセルの色を変えたい
javascriptを使ってセルの色をまとめて変える方法を調べています。 たとえば下図のようなセルがあるとして (2.2)始点(4.4)終点として □□□□□□ □□□□□□ □□□□□□ □■■■■■ □□□□□□ → ■■■■■■ □□□□□□ ■■■■□□ □□□□□□ □□□□□□ と変えるようなものを作成したいと考えております。 考えている方法ですが、タグに順番にIDをつけて、始点から終点の 間の色を変えるという方法を思いついたのですが、 一度目のクリックを始点、二度目のクリックを終点と判別させることは 可能でしょうか？ もしくはドラッグしてやったほうが簡単に実現できるのでしょうか？ 以上の点、アドバイス等お願いします。
- ベストアンサー
- JavaScript
- 複数のテーブルにjavascriptを使いたい
いつもお世話になっております。 今回はテーブルについてお聞きしたいです。 http://okwave.jp/qa3659173.htmlにあるようなテーブルに対する javascriptですがこのソースにテーブルをもうひとつ加えると もうひとつのほうはまったく反応しません。 idが同じだからなど考えられる対処として 変数のみ違うスクリプトを作ってみたりなどいろいろ試してみましたが どちらか片方しか動きません。 これを両方のテーブルで動かす方法はありませんか？ ご教授お願いします。 変数のみ違うスクリプトを作ってみたりなど
- 締切済み
- JavaScript
- ＩＥで矩形選択
ＩＥで矩形選択 ＩＥで表の一部の行や列のみを選択してエクセルに貼り付けたいと考えています。 （ドラッグすると全ての行・列の文字が選択されてしまいます） 文字数が一定ではないので、Terapad等に貼り付けてからの矩形削除も手間がかかります。 以前このサイトでFirefoxでの方法として下記に回答がありましたが、 http://okwave.jp/qa/q3656537.html バージョンが古くなってしまったようで使えません。 良い方法をご存知であれば、教えてください。
- ベストアンサー
- Windows XP
- WinShotの矩形範囲指定が出来ません
WinShotで『矩形範囲指定→JPEGで保存』を選択すると画面に赤い枠が出てきます。通常だと１度目のクリックで始点を決定し、２度目のクリックで終点を決定できるはずなのですが、１度クリックしただけで確定してしまい、保存先が表示されてしまいます。 対処方法をご存知の方いらっしゃいましたら、よろしくお願いします。
- 締切済み
- フリーウェア・フリーソフト
- SPメールでテキスト選択範囲を削除する方法
以前の質問 http://okwave.jp/qa/q7719108.html について… SPメールでテキスト選択範囲を削除する方法が分からず 困っている方が私の周りにも結構いますので 私なりの方法を示します。 (1) IME（日本語入力システム）を起動させる。 (2) [編集] → [全選択] をクリックする。 (3) 選択したい文字列の 始点／終点 をクリックする。 この時 既に全選択されているが無視して 始点／終点 を指定する。 (4) IME の backspaceキー で削除する。 これ以外にも もっと簡単な方法があるよ！と云う方は 是非 御教示ください。
- 締切済み
- Android
- AutoCADで選択が出来ない
AutoCADLT2002です。 囲ってオブジェクトを選択するとき、囲む始点がビュー範囲から 外れた場合(始点を決めてから終点を決める間にビュー拡大や ビュー移動をして始点が画面から外れた場合)、 ビューから外れて囲っていたオブジェクトは選択出来ません。 これを選択出来る様にする方法はありますか？ 説明が下手ですが、宜しくお願い致します。
- 締切済み
- CAD・DTP
- エクセル セルの選択の方法
お世話になります。 簡単な質問かもしれませんがよろしくお願いいたします。 オートSUM等でも何でも構わないのですが、あるセルを始点にして、そのセルのある行（または、列）の最終セルまで一括で選択する場合はどのような値を設定るれば良いのでしょう？？ 以下のようなことです。 =SUM(A5,A○) A○ の部分にはどのような値が入るのでしょう？ よろしくお願いいたします。
- 締切済み
- その他MS Office製品
- エクセルVBA・セルを選択して並べ替えたい
エクセルVBA・セルを選択して並べ替えたい 以下の質問では、たいへんお世話になりありがとうございました。 http://okwave.jp/qa/q6203452.html 少し関連した質問をいたします。 具体的に言いますと、マウスでセル範囲を選択して、その選択した範囲を並べ替える、というようなイメージです。（マウスでセル範囲を選択してから、マクロを実行します） 以下のコードで言うと Range("○●:○●").の部分が、マウスで選択した範囲というような具合です。 Sub sort1() Range("○●:○●").Sort _ Key1:=Range("d1"), _ Order1:=xlDescending, _ Header:=xlYes, _ Orientation:=xlTopToBottom End Sub 以上、よろしくご教示お願いします。
- ベストアンサー
- その他MS Office製品
- GIMPで描画した矩形を移動したい
GIMP（2.6.4）で画面のキャプチャー（PNG)に説明文を入れる作業をしています。 矩形選択後、 選択範囲の境界線を描画 ⇒ ストローク として、矩形（四角形）を描画するまではいいのですが、その描画した矩形の位置やサイズを調整したいのですが、どのようにすればいいか分かりません。 基本的な事で申し訳ございませんが、手順、もしくはこのような操作方法が分かるサイトをご存知でしたら、教えてください。 そもそもストローク描画ではできない場合、その他の方法があればご教授下さい。 よろしくお願いいたします。
- ベストアンサー
- フリーウェア・フリーソフト
- JavaScriptで画像から選択肢へ切り替え
JavaScript全くの初心者です。よろしくお願いします。 パナソニックさんのホームページ（http://panasonic.jp/）の様に、 最初に写真が表示されていて、mouseoverで選択肢が現れる、 と言ったページが作りたいのです。 フラッシュが使われていますが、画像で作りたいです。 勉強を始めましたが、画像と内容文への入れ替え方法は見つからず悩んでいます。 JavaScript記述して頂ける方いらっしゃいましたら、宜しくお願いいたします。
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 丁寧なサンプルつきでありがとうございます。 これを参考に自分のやりたいようにカスタムしていきたいと思います。 今回はありがとうございました。