html表格行数代码,HTML表格可选行Javascript包

没有插件就可以做到！

此示例通过按住Ctrl,cmd(对于MacOS用户)或Shift键盘键并单击来突出显示一行或多行.

我建议避免使用插件来处理简单的事情.您将看到,实现您需要实现的代码并不是很多代码.

HTML：

假设我有下表(您将与行交互).

Id	Name	Age	Salary
1	Luis	28	$100,000
2	Oscar	29	$90,000
3	Daniel	18	$50,000

CSS：

现在我将创建一些CSS以在导航表时使用默认光标(仅用于样式,可以删除它),另一个用于突出显示行.

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;

});

});

最后,如果您坚持创建插件,可以查看此站点并根据需要自定义代码.

其他功能只取决于你,我刚刚回答了你在问题中所要求的内容:-)希望这会有所帮助.