いつもお世話になっております。
今回はjavascriptでセルを矩形に選択する方法を調べております。
現在はhttp://okwave.jp/qa3659173.htmlにあるようなもので
□□□□□ このように始点から終点までを塗りつぶしています。
□■■■■
■■■■□
□□□□□
これを以下のようにしたいです。
□□□□□
□■■■□
□■■■□
□□□□□
始点と終点で囲まれた矩形にしたいですが、テーブルのIDを使っているので現状では無理と思っていますがどうなのでしょうか?
何か方法がありましたらご教授願います。
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のセルがあってもマウスを動かす範囲が少なければ軽いはずです。
ご回答ありがとうございます。
丁寧なサンプルつきでありがとうございます。
これを参考に自分のやりたいようにカスタムしていきたいと思います。
今回はありがとうございました。
No.1
- 回答日時:
こんな感じですか?
HTMLは、「http://okwave.jp/qa3659173.html」と同じでJavaScriptだけ修正しました。
#onmouseoutが無い等、元と異なる点もありますので、参考程度に利用してください。
var cellColor = "#ffc0c0";
var cellDefaultColor = "#ffffff";
// テーブル内のセルを2次元配列にする
// この配列を碁盤の要領で利用する
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;
}
ご回答ありがとうございました。
動きは期待したようになっておりました。
これを参考により自分に必要なようしていきたいと思います。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) ユーザー定義について質問です。 2 2023/06/28 13:21
- Visual Basic(VBA) エクセル VBA 条件によるセル点滅 お詳しい方 ご教授をお願いします。 Excelファイルにて 現 1 2022/11/03 15:53
- HTML・CSS アドバイスを下さい。 1 2022/10/08 01:18
- Excel(エクセル) Excel マウスなし操作の質問 3 2022/06/04 13:39
- Excel(エクセル) 図のような散布図の作り方を教えてください。 1 2022/07/19 11:52
- Excel(エクセル) 余計なお世話的な「入力規則」?対策は? 2 2023/01/14 12:39
- Excel(エクセル) Excelのセル上の日付の不具合 3 2022/05/22 18:20
- JavaScript セレクトボックスを選んで点数を出した後、4段階評価するプログラム 1 2022/07/03 07:23
- Excel(エクセル) マクロ セルの選択 5 2022/08/12 22:47
- Visual Basic(VBA) 指定した文字から指定した文字のスペースまでを削除するVBAの構文について 6 2022/07/24 22:20
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
Selectボックスの一覧表示方法
-
VBScriptでHTMLのセレクトボッ...
-
JavascriptからSQLへ繋ぎ方が分...
-
【JavaScript】プルダウンで数...
-
全てのselect要素をデフォルト...
-
コードレビューをお願いします。
-
3つのselectでURLパラメータを...
-
検索窓とプルダウンメニュー機...
-
【JS】selectでchangeした時の...
-
javascriptでセレクトボックス...
-
selectが変更されたらnameを指...
-
メールフォームでのラジオボタ...
-
3つの連動したプルダウンメニュ...
-
javascriptで合計金額を算出し...
-
プルダウンで選択した項目にあ...
-
子ウインドウから親ウインドウ...
-
セレクトボックスで選択した内...
-
<select> をmultiple にしてい...
-
javascriptでoptionタグを削除...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
複数のプルダウンを1つにまとめ...
-
全てのselect要素をデフォルト...
-
select要素のvalueを配列で取得...
-
Selectボックスの一覧表示方法
-
javascriptでセレクトボックス...
-
selectを変更不可にしたい
-
ラジオボタンとプルダウンを連...
-
同じ名前のセレクトがある場合...
-
JavaScriptで<select>の<option...
-
<input>の選択肢をプルダウンメ...
-
VBScriptでHTMLのセレクトボッ...
-
【javascript】連想配列からセ...
-
webページの一部のみの更新につ...
-
3つのselectでURLパラメータを...
-
プルダウンの値によって活性・...
-
セレクトボックスで配列を呼び...
-
プルダウンの選択値により活性...
-
3つの連動したプルダウンメニュ...
-
selectボックスで選択数を制限...
おすすめ情報