Javascript 通过拖动选择表格上的单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2013902/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select Cells On A Table By Dragging
提问by Ben Shelock
I was looking at this questionand saw the reference to the iPhone game where you drag across the screen selecting letters as you go.
我正在查看这个问题，并看到了对 iPhone 游戏的引用，在该游戏中，您可以边走边拖过屏幕选择字母。
I was curious to see an implimentation of this in Javascript using tables. So you'd drag the mouse over each cell they would then become highlighted.
我很想看到使用表格在 Javascript 中实现这一点。因此，您可以将鼠标拖到每个单元格上，然后它们就会突出显示。
I'm not sure what the best method would be but I hope someone has a go. Someone attempted it here, but it doesn't really work.
我不确定最好的方法是什么，但我希望有人试一试。有人在这里尝试过，但它并没有真正起作用。
Thank Cacoofor the sexy diagrams. It's like an online visio, really nice. Check it out ;)
感谢Cacoo的性感图表。这就像一个在线 visio，真的很好。一探究竟 ;）
回答by August Lilleaas
Here's a working prototype: http://jsfiddle.net/few5E/Using jQuery for DOM hooking, but could easily be implemented with another framework.
这是一个工作原型：http: //jsfiddle.net/few5E/使用 jQuery 进行 DOM 挂钩，但可以使用其他框架轻松实现。
Update: http://jsfiddle.net/Brv6J/a slightly different version - the highlighted state will only change when you release and click again.
更新：http: //jsfiddle.net/Brv6J/一个略有不同的版本 - 突出显示的状态只会在您释放并再次单击时发生变化。
Update 2: http://jsfiddle.net/Brv6J/3/- binding onselectstart so that text is not selected in IE.
更新 2：http: //jsfiddle.net/Brv6J/3/- 绑定 onselectstart 以便在 IE 中不选择文本。
A few relevant facts:
一些相关的事实：
- The mousedown event of the table cells is hooked to track the actual click. This event is stopped, so that text selection is hindered. Also binding ontextselect for the same effect in IE.
- The mouseover event will toggle the highlighted class for the cell
- The mouseout event is hooked on
document. This is to ensure that it always runs. If the mouseup event was hooked on the table cell, it would not trigger if you released the mouse key with the mouse outside of the table. This state is tracked inisMouseDown.
- 表格单元格的 mousedown 事件被挂钩以跟踪实际点击。此事件已停止，因此会阻碍文本选择。也在 IE 中绑定 ontextselect 以获得相同的效果。
- 鼠标悬停事件将切换单元格的突出显示类
- mouseout 事件挂在 上
document。这是为了确保它始终运行。如果 mouseup 事件挂在表格单元格上，那么如果您在表格外用鼠标释放鼠标键，则不会触发该事件。此状态在 中跟踪isMouseDown。
Full source code for reference:
完整源代码供参考：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css" media="screen">
table td {
width:100px;
height:100px;
text-align:center;
vertical-align:middle;
background-color:#ccc;
}
table td.highlighted {
background-color:#999;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="1" id="our_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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
var isMouseDown = false;
$("#our_table td")
.mousedown(function () {
isMouseDown = true;
$(this).toggleClass("highlighted");
return false; // prevent text selection
})
.mouseover(function () {
if (isMouseDown) {
$(this).toggleClass("highlighted");
}
})
.bind("selectstart", function () {
return false; // prevent text selection in IE
});
$(document)
.mouseup(function () {
isMouseDown = false;
});
});
</script>
</body>
</html>
回答by Martin
If you're after spreadsheet-like cell selection (in column/row blocks), you need to highlight every cell in every row that is between your start & end index (both row and cell) in your mouseover event:
如果您在选择类似电子表格的单元格（在列/行块中），则需要在鼠标悬停事件中突出显示开始和结束索引（行和单元格）之间的每一行中的每个单元格：
for (var i = rowStart; i <= rowEnd; i++) {
var rowCells = table.find("tr").eq(i).find("td");
for (var j = cellStart; j <= cellEnd; j++) {
rowCells.eq(j).addClass("selected");
}
}
As the user might start selecting cells from all directions (up-bottom, bottom-up, right-left, left-right) you need to assign the correct indexes for start & end.
由于用户可能会从各个方向（自上而下、自下而上、右左、左右）开始选择单元格，因此您需要为开始和结束分配正确的索引。
Here is a jsFiddle.
这是一个jsFiddle。
回答by Jaanus
http://www.jaanuskase.com/stuff/dragSelect.html
http://www.jaanuskase.com/stuff/dragSelect.html
Not sure if you wanted pure-Javascript implementation, I used jQuery for convenience.
不确定您是否想要纯 Javascript 实现，为了方便起见，我使用了 jQuery。
