7×7のセルをドラッグで選択をするときに、選択できない場所を作りたいと思っているのですが、どのようにすればいいのでしょうか?
ネット上にあるサンプルでは画像の(0、0)のセルから選択できるのですが、これを(1,2)を選択できるセルの開始点として5×6の範囲で選択できるようにしたいと思っています。
</tytle>までのひながた以降のコードです。
わかる方よろしくお願いします。
<style type="text/css">
html, body{
margin:0px;
}
table{
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
width:500px;
height:500px;
}
table, td, th{
margin:10px;
border-style:solid;
border-color:black;
border-width:1px;
}
</style>
<script type="text/javascript">
var startCell = null;
//マウスダウンのイベント処理
function mouseDown(table, e){
if (!e) var e = window.event;
startCell = e.srcElement? e.srcElement: e.target;
if(startCell.tagName != "TD"){
startCell = null;
return;
}
mouseMove(table, e);
}
//マウスアップのイベント処理
function mouseUp(table, e){
if (!e) var e = window.event;
var endCell = e.srcElement?e.srcElement:e.target;
if(!(endCell.tagName=="TD" && startCell))
return false;
//セルの位置を取得
var from = getCellPos(table, startCell);
var to = getCellPos(table, endCell);
if(!from || !to)
return false;
//mouseMoveで選択状態表示の更新をさせないようにする
startCell = null;
//ここに選択後の処理を書く
alert("("+from.col+", "+from.row+") -> ("+to.col+", "+to.row+")");
}
//マウス移動のイベント処理
function mouseMove(table, e){
if (!e) var e = window.event;
var endCell = e.srcElement?e.srcElement:e.target;
if(!(endCell.tagName=="TD" && startCell))
return false;
//セルの位置を取得
var from = getCellPos(table, startCell);
var to = getCellPos(table, endCell);
if(!from || !to)
return false;
//色を変更
var x, y, cells;
for(y=0; y<table.rows.length; y++){
row = table.rows.item(y);
for(x=0; x<row.cells.length; x++){
if((from.row-y)*(y-to.row)>=0 && (from.col-x)*(x-to.col)>=0)
row.cells.item(x).style.backgroundColor = "#ffdddd";//選択状態の色
else
row.cells.item(x).style.backgroundColor = "transparent";//未選択状態の色
}
}
}
//tableの中のcellの位置を取得する
function getCellPos(table, cell){
var pos = new Object();
if(cell.nodeName == "TD"){
var x, y, cells;
for(y=0; y<table.rows.length; y++){
row = table.rows.item(y);
for(x=0; x<row.cells.length; x++){
if(row.cells.item(x) == cell){
pos.row = y;
pos.col = x;
return pos;
}
}
}
}
return null;
}
</script>
</head>
<body><!-- Google Analytics Start -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9296140-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
<!-- Google Analytics End -->
<table onmousedown="mouseDown(this, event); return false;" onmouseup="mouseUp(this, event);" onmousemove="mouseMove(this, event); return false;">
<tr>
<td>(0,0)</td><td>(1,0)</td><td>(2,0)</td><td>(3,0)</td><td>(4,0)</td><td>(5,0)</td><td>(6,0)</td>
</tr>
<tr>
<td>(0,1)</td><td>(1,1)</td><td>(2,1)</td><td>(3,1)</td><td>(4,1)</td><td>(5,1)</td><td>(6,1)</td>
</tr>
<tr>
<td>(0,2)</td><td>(1,2)</td><td>(2,2)</td><td>(3,2)</td><td>(4,2)</td><td>(5,2)</td><td>(6,2)</td>
</tr>
<tr>
<td>(0,3)</td><td>(1,3)</td><td>(2,3)</td><td>(3,3)</td><td>(4,3)</td><td>(5,3)</td><td>(6,3)</td>
</tr>
<tr>
<td>(0,4)</td><td>(1,4)</td><td>(2,4)</td><td>(3,4)</td><td>(4,4)</td><td>(5,4)</td><td>(6,4)</td>
</tr>
<tr>
<td>(0,5)</td><td>(1,5)</td><td>(2,5)</td><td>(3,5)</td><td>(4,5)</td><td>(5,5)</td><td>(6,5)</td>
</tr>
<tr>
<td>(0,6)</td><td>(1,6)</td><td>(2,6)</td><td>(3,6)</td><td>(4,6)</td><td>(5,6)</td><td>(6,6)</td>
</tr>
</table>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
これ何て呼びますか Part2
あなたのお住いの地域で、これ、何て呼びますか?
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
ドラッグ&ドロップしたらその範囲が一つの範囲になるようにしたい
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
netscapeでもinnerTextやinnner...
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
javascriptで質問です。 displa...
-
順番にセルの背景色をつけたい
-
リンク色の変更
-
JavaScriptでテーブルをクリッ...
-
マウスをブラウザの外に出した...
-
javascriptで表のます目と画像...
-
【UWSC】HTML内のある部分を抽...
-
IE がクラッシュします
-
一覧から選択した行の行番号を...
-
特定<table>内の<td>の色を変える
-
カレンダーの年月日の横に翌月...
-
jQueryのプラグイン「Tablesort...
-
return trueとreturn falseの用...
-
onchangeイベントを強制的に発...
-
<JavaScript>tableタグを入力不...
-
追加ボタンを押した際に ok ボ...
-
プルダウン 項目が多いので先頭...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
プルダウンで選択すると、DBの...
-
【UWSC】HTML内のある部分を抽...
-
tableの任意行にfocusをあてる
-
至急!GetElementById でtdの...
-
一覧から選択した行の行番号を...
-
マウスをブラウザの外に出した...
-
Selenium.ChromeDriverの使い方...
-
「オブジェクトは、このプロパ...
-
リンク色の変更
-
スクロールバーの表示位置を変...
-
テーブルで複数行をまとめて非...
-
Excelで作ったhtmlファイルのサ...
-
チェックボックスにチェックが...
-
JavaScriptでテーブルの行入れ替え
-
テーブル内に表示されている数...
-
【JQuery】テーブルで行選択さ...
-
階層式メニューをtableタグ内に
おすすめ情報