先ほども似たような質問をしているのですが、
画像のような画面のセルをドラッグで選択するときに、最大で２列分だけしか選択できないようにしたいと思っています。施設管理のサイトを作りたいと思っています。先ほどした質問でドラッグ
できる位置を指定ができるようになったのですがドラッグできる範囲も指定したいのです。
日付をまたいで選択できないようにしたいと思っています。これは、選択しているセルは、色が変わるのですが、できれば日付をまたぐと色が変わらず、選択できないようにしたいです。
ですが選択できても、範囲を決定したときに、エラーメッセージが出てくるというような方法でもかまいません。
厚かましいかもしれませんがお願いします。
以下は
</tytle>までのひながた以降のコードです。
わかる方よろしくお願いします。画像の空白部には２４×３０のセルがあります。
<table>～</table>の間には画像のような<td></td>のタグがあります。
よろしくお願いします。
<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;">
</table>
</body>
</html>
補足
詳しい使い方までかいていただいて申し訳ないのですが現在ネットにつなぐことができないのでDLもできなければサイトをみる事すらできません…。本当に色々と教えていただいているのに期待に応える事ができなくて本当にごめんなさい。