我是Javascript / JQuery的新手。我想知道如何修改此处显示的表格单元格突出显示http://jsfiddle.net/Brv6J/,并允许选择方形图案。
例如,将A, B, C, D, G, H
和I
视为表格单元格。沿着对角线从A到E拖动鼠标应该选择单元格A,B,D & E
A B C
D E F
G H I
答案 0 :(得分:15)
我之前为日历选择编写了脚本。我希望这对你有所帮助。
脚本:
$(function () {
$("#table td")
.mousedown(rangeMouseDown)
.mouseup(rangeMouseUp)
.mousemove(rangeMouseMove);
});
var dragStart = 0;
var dragEnd = 0;
var isDragging = false;
function rangeMouseDown(e) {
if (isRightClick(e)) {
return false;
} else {
var allCells = $("#table td");
dragStart = allCells.index($(this));
isDragging = true;
if (typeof e.preventDefault != 'undefined') { e.preventDefault(); }
document.documentElement.onselectstart = function () { return false; };
}
}
function rangeMouseUp(e) {
if (isRightClick(e)) {
return false;
} else {
var allCells = $("#table td");
dragEnd = allCells.index($(this));
isDragging = false;
if (dragEnd != 0) {
selectRange();
}
document.documentElement.onselectstart = function () { return true; };
}
}
function rangeMouseMove(e) {
if (isDragging) {
var allCells = $("#table td");
dragEnd = allCells.index($(this));
selectRange();
}
}
function selectRange() {
$("#table td").removeClass('selected');
if (dragEnd + 1 < dragStart) { // reverse select
$("#table td").slice(dragEnd, dragStart + 1).addClass('selected');
} else {
$("#table td").slice(dragStart, dragEnd + 1).addClass('selected');
}
}
function isRightClick(e) {
if (e.which) {
return (e.which == 3);
} else if (e.button) {
return (e.button == 2);
}
return false;
}
CSS:
#table { border:1px solid #ccc; }
#table td { padding:50px; }
#table td.selected { background-color:#ccc; }
HTML:
<table id="table">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>
我在http://jsfiddle.net/5VXDt/1/
创建小提琴可以通过添加单击事件取消选择或选择一个单元格来改进脚本。
答案 1 :(得分:4)
JQuery Selectable可能更符合要求。
答案 2 :(得分:1)
您可以使用jquery jquery.ui.draggable.js
$('td').draggable({
start : function (event, ui) {
// highlighting code
},
stop : function (event, ui) {
//restore the highlighting code
}
});
答案 3 :(得分:1)
为了更方便用户选择日历单元格,我建议使用eHighLight Plugin。一个非常简单的小文件元素高照明插件