HTML 表可选行 Javascript 包
HTML table selectable rows Javascript package
本文关键字:Javascript HTML 更新时间:2023-09-26
是否有一个Javascript软件包可以通过单击它们并使用Shift和Ctrl键来选择/突出显示表行?
我正在寻找与iTunes或其他音乐播放器相同的功能,该功能允许通过单击行或通过按住shift或控制并单击来突出显示多首歌曲。
你可以在没有插件的情况下做到这一点!
此示例通过按住 Ctrl、cmd(适用于 MacOS 用户)或 Shift 键盘键并单击来highlights
一个或多个row
。
我建议避免使用简单事物的插件。您将看到,对于您需要实现的目标,这不是要实现的大量代码。
现场演示: 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
以在导航table
时使用default
cursor
(仅用于样式,您可以将其删除),另一个用于highlight
row
。
tr { cursor: default; }
.highlight { background: yellow; }
j查询:
这是您需要的所有代码,请阅读评论。
$(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/
其他功能仅取决于您,我刚刚回答了您在问题中的要求:-)希望这有帮助。
你可以使用 jQuery UI 可选。
您可以按住 Ctrl 选择多个 itens,也可以单击一个项目并拖动。
API 参考。
JS垃圾桶示例。
相关文章:
- Javascript html每点击一次就会更改url
- 通过javascript/html访问twitter共享iframe
- 使用鼠标悬停JavaScript/HTML显示文本
- JavaScript-HTML表单到JSON(空值)和格式
- 使用javascript html实时预览文本区域输入
- 如何每秒从一个变量中提取一定次数的javascript/html
- 使用变量值作为'名称标识符'javascript/html
- JavaScript HTML Onclick
- 非侵入性Javascript HTML注入
- AppendChild Form / Table [Javascript/Html/PHP]
- 按钮don't使用onClick-Javascript HTML重定向
- 在库(javascript/HTML)中将“name”替换为“id”
- 如何确定使用 javascript/html 单击了哪个对象/图像
- 新的javascript HTML元素不遵循css规则
- JavaScript/HTML 错误的解决方案
- 从图像URL javascript html保存图像文件
- javascript html使用webstorage保存表单
- Javascript+HTML中的日期选择器准备好了吗?(需要:DD、MM、YY的单独字段加上日历选择器)
- 谷歌地图/融合表Javascript HTML赢得't显示/可视化所有多边形数据(通过色标)
- JavaScript/HTML命令行小部件