jQuery HTML 表格可选行 Javascript 包
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19480719/
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
HTML table selectable rows Javascript package
提问by Michael
Is there a Javascript package out there that makes table rows selectable/highlightable by clicking on them and using the Shiftand Ctrlkeys?
是否有一个 Javascript 包可以通过单击它们并使用Shift和Ctrl键使表格行可选择/突出显示？
I'm looking for the same functionality as iTunes or some other music player that allows to highlight one song by clicking the row or highlighting multiple by holding shift or control and clicking.
我正在寻找与 iTunes 或其他一些音乐播放器相同的功能，它允许通过单击行来突出显示一首歌曲，或者通过按住 shift 或 control 并单击来突出显示多首歌曲。
回答by Oscar Jara
You can do it without plugins!
您可以在没有插件的情况下做到这一点！
This example highlightsa rowor multiple ones by holding Ctrl, cmd(for MacOS users)or Shiftkeyboard key and clicking.
此示例通过按住, （对于 MacOS 用户）或键盘键并单击来实现highlights一个row或多个。CtrlcmdShift
I will suggest to avoid plugins for simple things. You will see that this is not a lot of code to implement for what you need to achieve.
我会建议避免使用插件来处理简单的事情。您将看到，对于您需要实现的目标，要实现的代码并不多。
Live demo:http://jsfiddle.net/oscarj24/ctLm8/2/
现场演示：http ://jsfiddle.net/oscarj24/ctLm8/2/
HTML:
HTML：
Suppose I have the following table (you will interact with the rows).
假设我有下表（您将与行进行交互）。
<table border="1">
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
<tr>
<td>1</td>
<td>Luis</td>
<td>28</td>
<td>0,000</td>
</tr>
<tr>
<td>2</td>
<td>Oscar</td>
<td>29</td>
<td>,000</td>
</tr>
<tr>
<td>3</td>
<td>Daniel</td>
<td>18</td>
<td>,000</td>
</tr>
</table>
CSS:
CSS：
Now I will create some CSSto use the defaultcursorwhen navigating the table(just for styling, you can remove it)and another one to highlightthe row.
现在，我会创造一些CSS使用defaultcursor导航时table（只是为了造型，你可以将其删除）和一个又一个highlight的row。
tr { cursor: default; }
.highlight { background: yellow; }
jQuery:
jQuery：
This is all the code you need, please read comments.
这是您需要的所有代码，请阅读评论。
$(function() {
/* Get all rows from your 'table' but not the first one
* that includes headers. */
var rows = $('tr').not(':first');
/* Create 'click' event handler for rows */
rows.on('click', function(e) {
/* Get current row */
var row = $(this);
/* Check if 'Ctrl', 'cmd' or 'Shift' keyboard key was pressed
* 'Ctrl' => is represented by 'e.ctrlKey' or 'e.metaKey'
* 'Shift' => is represented by 'e.shiftKey' */
if ((e.ctrlKey || e.metaKey) || e.shiftKey) {
/* If pressed highlight the other row that was clicked */
row.addClass('highlight');
} else {
/* Otherwise just highlight one row and clean others */
rows.removeClass('highlight');
row.addClass('highlight');
}
});
/* This 'event' is used just to avoid that the table text
* gets selected (just for styling).
* For example, when pressing 'Shift' keyboard key and clicking
* (without this 'event') the text of the 'table' will be selected.
* You can remove it if you want, I just tested this in
* Chrome v30.0.1599.69 */
$(document).bind('selectstart dragstart', function(e) {
e.preventDefault(); return false;
});
});
Finally, if you insist on creating a plugin, you can take a look at this site and customize the code for what you need.
最后，如果你坚持创建一个插件，你可以看看这个站点，并根据你的需要自定义代码。
http://learn.jquery.com/plugins/basic-plugin-creation/
http://learn.jquery.com/plugins/basic-plugin-creation/
Other functionalities just depend on you, I just answered what you required in the question :-) hope this helps.
其他功能取决于您，我只是回答了您在问题中的要求:-) 希望这会有所帮助。
回答by kelvinss
You can use jQuery UI selectable.
您可以使用 jQuery UI可选。
You can select multiple itens holding Ctrl, or you can click a item and drag.
您可以选择多个项目按住Ctrl，或者您可以单击一个项目并拖动。
