1
私は学生でプログラミングに慣れていないし、試してJavascriptを学びたい。私はマウスのドラッグで表のセルを強調表示する必要がある練習をしています。私はそれを働かせましたが、私はどの方向を（X方向からY方向だけでなく）ドラッグしてセルをハイライトする方法を考え出すのに問題があります。下のコードは、X方向からY方向への動作を示しています。ユーザーがマウスをYからX方向にドラッグしたときも同じことをしたい。 たとえば、A, B, C, D, G, HおよびIを表のセルと見なします。JQueryテーブルセル選択スクリプト
A B C
D E F
G H I
マウスを対角線に沿ってAからEにドラッグすると、セルA,B,D & Eが選択されます。
$(function() {
var isMouseDown = false,
isHighlighted;
var mouseDownRowX = 0;
var mouseDownRowY = 0;
$("#assayPlateTable2 td.dragShadow")
.click(function() {
$("#assayPlateTable2 td").each(function() {
var currClass = $(this).attr('class');
if(currClass == 'dragShadow') {
$(this).css('backgroundColor', 'none');
}
});
var currClass = $(this).attr('class');
if(currClass == 'dragShadow') {
$(this).css('backgroundColor', '#dff0de');
}
currRow = $(this).parent().parent().children().index($(this).parent());
})
.mousedown(function() {
isMouseDown = true;
mouseDownRowX = $(this).parent().parent().children().index($(this).parent());
mouseDownRowY = $(this).parent().children().index($(this));
return false; // prevent text selection
})
.mouseover(function() {
//alert('mouse over' + isMouseDown);
if (isMouseDown) {
currRow = $(this).parent().parent().children().index($(this).parent());
currCol = $(this).parent().children().index($(this));
//var currRow = 1;
//var currCol = 1;
$("#assayPlateTable2 td").each(function() {
_mouseDownRowX = $(this).parent().parent().children().index($(this).parent());
_mouseDownRowY = $(this).parent().children().index($(this));
if(_mouseDownRowX >=
mouseDownRowX && _mouseDownRowX <= currRow && _mouseDownRowY
>= mouseDownRowY && _mouseDownRowY <= currCol) {
var currClass = $(this).attr('class');
if(currClass == 'dragShadow') {
$(this).css('backgroundColor', '#dff0de');
}
//alert("setting==>" + currRow + "," + currCol);
} else {
var currClass = $(this).attr('class');
if(currClass == 'dragShadow') {
$(this).css('backgroundColor', 'none');
}
}
});
for(var i = mouseDownRowX; i < _mouseDownRowX; i++) {
for(var j = mouseDownRowY; j < _mouseDownRowY; j++) {
}
}
//$(this).parent().toggleClass("highlighted", isHighlighted);
//$(this).parent().css('backgroundColor', '#dff0de');
}
})
.bind("selectstart", function() {
return false;
})
$(document)
.mouseup(function() {
isMouseDown = false;
});
});
</script>
HTML：：
<table cellpadding="0" cellspacing="0" id="assayPlateTable2">
<tr>
<td class="dragShadow"> </td>
<td class="dragShadow"> </td>
<td class="dragShadow"> </td>
<td class="dragShadow"> </td>
<td class="dragShadow"> </td>
<td class="dragShadow"> </td>
</tr>
<tr>
<td class="dragShadow"> </td>
<td class="dragShadow"> </td>
<td class="dragShadow"> </td>
<td class="dragShadow"> </td>
<td class="dragShadow"> </td>
<td class="dragShadow"> </td>
</tr>
<tr>...</tr> and so on
</table>