HTML表格可选行javascript包 [英] HTML table selectable rows javascript package
问题描述
有没有一个javascript包可以让表格行选择/ highlightable通过点击它们并使用Shift和Ctrl键？
我正在寻找与iTunes或其他音乐播放器相同的功能，可以通过单击该行来突出显示一首歌曲，也可以通过按住Shift或Ctrl并单击来突出显示多首歌曲。
谢谢！
你可以不用插件！
这个例子突出显示 a 行或通过按住 Ctrl ， cmd （MacOS用户）或 Shift 键盘按键并点击。
HTML：
假设我有下表（您将与行进行交互）。
< table border = 1 >
< tr>
< th> Id< / th>
< th>名称< / th>
< th>年龄< / th>
工资< / th>
< / tr>
< tr>
< td> 1< / td>
< td> Luis< / td>
< td> 28< / td>
< td> $ 100,000< / td>
< / tr>
< tr>
< td> 2< / td>
< td>奥斯卡< / td>
< td> 29< / td>
< td> $ 90,000< / td>
< / tr>
< tr>
< td> 3< / td>
< td> Jessie< / td>
< td> 18< / td>
< td> $ 50,000< / td>
< / tr>
< / table>
CSS：
现在我将创建一些 CSS 以使用默认 <$ c $在导航表格 时（仅用于样式，可以将其删除），另一个用于<$ c>游标 c $ c> highlight 行。
tr {cursor：default; }
.highlight {background：yellow; }
jQuery：
这是你需要的所有代码，请阅读评论。
$（function （）{
/ *从你的'表'中获取所有行，但不包括包含头部的第一个
* * /
var rows = $（'tr'） .not（'：first'）;
/ *为行创建'click'事件处理程序* /
rows.on（'click'，function（e）{
/ *获取当前行* /
var row = $（this）;
* *检查'Ctrl'，'cmd'或'Shift'键盘键是否被按下
*'Ctrl'=>由'e.ctrlKey'或'e.metaKey'
*'Shift'=>代表'e.shiftKey'* /
if（（e.ctrlKey || e.metaKey）|| e.shiftKey）{
/ *如果按下，则突出显示被点击的另一行* /
row.addClass（'highlight'）;
} else {
/ *否则只需突出显示一行并清除其他行* /
rows.removeClass（'highlight'）;
row.addClass（'highlight'）;
}
}）;
/ *此'事件'仅用于避免表格文本
*被选中（仅用于样式）。
*例如，当按下'Shift'键盘键并点击
*（没有这个'event'时），'table'的文本将被选中。
*如果你愿意，你可以删除它，我只是在
* Chrome v30.0.1599.69 * /
$（document）.bind（'selectstart dragstart'，function（e ）{
e.preventDefault（）; return false;
}）;
}）;
最后，如果你坚持创建一个插件，你可以看看这个站点并定制代码你需要什么。
http：// learn .jquery.com / plugins / basic-plugin-creation /
其他功能只取决于您，我只是回答了您在问题:-)希望这有助于。
Is there a javascript package out there that makes table rows selectable/highlightable by clicking on them and using the Shift and Ctrl keys?
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.
Thanks!
You can do it without plugins!
This example highlights a row or multiple ones by holding Ctrl, cmd (for MacOS users) or Shift keyboard key and clicking.
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/
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>$100,000</td>
</tr>
<tr>
<td>2</td>
<td>Oscar</td>
<td>29</td>
<td>$90,000</td>
</tr>
<tr>
<td>3</td>
<td>Jessie</td>
<td>18</td>
<td>$50,000</td>
</tr>
</table>
CSS:
Now I will create some CSS to use the default cursor when navigating the table (just for styling, you can remove it) and another one to highlight the row.
tr { cursor: default; }
.highlight { background: yellow; }
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/
Other functionalities just depend on you, I just answered what you required in the question :-) hope this helps.
这篇关于HTML表格可选行javascript包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
