Question

我有一个大约10,000个单元格的大表格，其形式为X-Y滚动网格，有点像电子表格（约90列×100行）。这使用带有fixedColumns扩展名的Datatables jquery插件将标题行和最左边的列锁定到位，然后在固定大小的窗口内滚动单元格。

这样可行，但是如果我使用jquery将事件处理程序附加到所有单元格（通过td＆＃39; s），那么表格的加载和渲染时间变得非常慢，因此单击一个单元格允许要编辑的内容。这是练习的重点，所以我需要一个更智能的解决方案来实现这一结果。

我可以将事件附加到整个表格甚至每一行以捕获事件而不会造成重大的时间损失，但是如何找出单击了哪个单元格？

我确实想过在相对于表原点生成click事件时尝试基于鼠标位置的东西，但视口中可见的单元格范围只是表单的一小部分（一次大约180-190）），所以X / Y滚动条在任何计算中都很重要。

任何人都有可能有效的其他/更好方法的建议吗？

Answer 1

您可以将事件处理程序委托给table元素。也就是说，通过利用JS如何通过每个父元素冒泡事件，而不是为每个元素创建一个新的处理程序，您可以根据下面的小提琴在<table>元素上创建一个。这称为事件委托。

http://jsfiddle.net/chrispickford/bsf9a8w1/1/

$(document).ready(function() {
    var $table = $('#table');
    $table.on('click', 'td', function() {
        // 'this' is your cell element
        console.log($(this));     
    });
});

Answer 2

您如何附加事件处理程序？在每个单元（TD）上单独？

您应该考虑将事件处理程序附加到其中一个父元素（事件冒泡到父元素，除非调用stopPropagation）。

所以这样的事情也会起作用：

$(table).on('td', 'click', eventHandler);

将事件附加到表中，并在单击单元格时返回。哪个对您来说要快得多，并且没有功能上的损失。

希望有所帮助。

具有非常大的表的表格单元格上的jquery事件

2 个答案: