如何添加“;选择“;当一行被单击时,类仅限于表的一行
How can I add a "selected" class to just one row of a table when a row is clicked?
我正在使用以下代码:
$("#dataTable tbody").on("click", "tr", function (event) {
if (!$(this).hasClass('row_selected')) {
$(oTable.fnSettings().aoData).each(function () {
$(this.nTr).removeClass('row_selected');
});
$(this).addClass('row_selected');
gridClickHandler($(this));
}
});
当单击一行时,如果该行已被选中,则不会发生任何事情。如果不是,则所有行都删除了该类,而当前行添加了row_selected类。
然而,这很慢,因为我的表有很多行。当前的延迟看起来不太好。我想到的是将addClass移到开头。但如果我这样做,每个循环都会删除它。
有没有办法让这项工作更有效率(更快的响应)?
<table id-"dataTable">
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
这是的示例
$('table').on('click', 'tr', function() {
var row = $(this); //cache the row
if(!row.hasClass('selected'){
row.addClass('selected') //add class to clicked row
.siblings() //get the other rows
.removeClass('selected'); //remove their classes
gridClickHandler(row);
}
});
使用.on()
的优点是,它只将一个事件处理程序绑定到子级(tr
)的父级(在本例中为table
)。在每行上使用.click()
意味着每个tr
元素都有一个处理程序,这是一种开销。
例如,如果我有一千行,那么当使用.click()
时,将有一千个单击处理程序,而不是在使用.on()
时,仅在table
上侦听tr
的所有单击事件。
试试这个:-
$("#dataTable tbody tr").on("click", "tr", function (event) {
$("#dataTable tbody tr").removeClass('row_selected');
$(this).addClass('row_selected');
}
});
$("#dataTable tbody tr").click(function () {
$('#dataTable tbody tr.selected').removeClass('selected');
$(this).addClass('selected');
gridClickHandler($(this));
});
检查这个jsfidd,即使在大表中也能很快工作!
--在注释后编辑--
$("#dataTable").on("click", "tr", function (e) {
var $this = $(this);
// this line removes all selected classes from the rows siblings
$this.siblings().removeClass("row_selected");
// this line will toggle the selected class,
// therefore deselecting the row if it has been selected before
$this.toggleClass("row_selected");
gridClickHandler($this);
});
或者缓存以前选择的行。
(function() {
var $oldSelected = null;
$("#dataTable").on("click", "tr", function (e) {
var $this = $(this);
// this line removes all selected classes from the rows siblings
$oldSelected.removeClass("row_selected");
// this line will toggle the selected class,
// therefore deselecting the row if it has been selected before
$oldSelected = $this.addClass("row_selected");
gridClickHandler($this);
});
})();
顺便说一句,缓存jQuery调用——或者您重复需要的函数调用的结果——总是节省处理时间的好主意。
相关文章:
- 自定义渲染器未应用于表渲染手动可操作
- 无法通过 Ajax 将 CSS 应用于表单输入
- 如何将 IF 语句应用于表单的<选择>关系
- 如何创建具有两种状态的按钮切换,其行为类似于表单输入的复选框
- jQuery mousenter适用于表数据,但不适用于整个表行
- 表单元格(td)相对于表行(tr)的绝对位置
- ASP MVC jQuery验证专注于工作,但不专注于表单提交
- 将jQuery函数应用于表行,但不应用于第一个表数据
- 将jquery事件应用于表中的特定区域或行
- 如何将样式应用于表中的偶数行或奇数行
- body标记末尾的脚本标记是否可以作用于表单
- 使用GreaseKit:如果字符串存在于表单元格中,则单击特定按钮,如果它出现在相同的单元格中
- 更改只适用于表中的第一行
- JQuery:如何将一个类应用于表中行内的特定数据onclick或单选按钮
- 自动对焦于表单中的第一个空字段
- 修改筛选器,使其仅应用于表中的可见行
- Jquery - info/docs关于适用于表单中不同类型输入元素的属性列表
- 禁用最后一行html表复选框
- 使链接目标依赖于表单值
- 相对于表的mouseout和mouseover的更正