无需插件即可完成!
This example highlights
a row
or multiple ones by holding Ctrl, cmd (for MacOS users) or Shift keyboard key and clicking.
我建议避免使用简单的插件。您会发现,对于您需要实现的目标来说,实现这些代码并不多。
现场演示: http://jsfiddle.net/oscarj24/ctLm8/2/ http://jsfiddle.net/oscarj24/ctLm8/2/
HTML:
假设我有下表(您将与行交互)。
<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>Daniel</td>
<td>18</td>
<td>$50,000</td>
</tr>
</table>
CSS:
现在我将创建一些CSS
使用default
cursor
导航时table
(仅用于造型,可以将其删除)和另一个highlight
the row
.
tr { cursor: default; }
.highlight { background: yellow; }
jQuery:
这就是您需要的全部代码,请阅读评论。
$(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;
});
});
最后,如果您坚持创建插件,您可以查看此站点并根据您的需要自定义代码。
http://learn.jquery.com/plugins/basic-plugin-creation/ http://learn.jquery.com/plugins/basic-plugin-creation/
其他功能仅取决于您,我只是回答了您在问题中所需的内容:-)希望这会有所帮助。