我有下表。
<table>
<tr>
<td>Name</td>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
</tr>
<tr>
<td class="tdName">Smith</td>
<td class="tdTime" id="td_smith_01">1</td>
<td class="tdTime" id="td_smith_02">%nbsp;</td>
<td class="tdTime" id="td_smith_03">1</td>
<td class="tdTime" id="td_smith_04">%nbsp;</td>
<td class="tdTime" id="td_smith_05">2</td>
</tr>
<tr>
<td class="tdName">Miller</td>
<td class="tdTime" id="td_miller_01">%nbsp;</td>
<td class="tdTime" id="td_miller_02">2</td>
<td class="tdTime" id="td_miller_03">%nbsp;</td>
<td class="tdTime" id="td_miller_04">2</td>
<td class="tdTime" id="td_miller_05">1</td>
</tr>
<tr>
<td class="tdName">Underwood</td>
<td class="tdTime" id="td_underwood_01">%nbsp;</td>
<td class="tdTime" id="td_underwood_02">%nbsp;</td>
<td class="tdTime" id="td_underwood_03">1</td>
<td class="tdTime" id="td_underwood_04">1</td>
<td class="tdTime" id="td_underwood_05">%nbsp;</td>
</tr>
<tr>
<td class="tdName">Stinson</td>
<td class="tdTime" id="td_stinson_01">2</td>
<td class="tdTime" id="td_stinson_02">2</td>
<td class="tdTime" id="td_stinson_03">%nbsp;</td>
<td class="tdTime" id="td_stinson_04">%nbsp;</td>
<td class="tdTime" id="td_stinson_05">1</td>
</tr>
</table>
实际上，它更大，更复杂。现在，我想添加一个单击侦听器来处理表的每个时间单元，因此要对类“ tdTime”的每个单元格进行操作，因此我添加了：
var tdTimes = $(".tdTime");
tdTimes.onclick(
function() {
switch($(this).html()) {
...a switch to change the time in the td.
}
}
);
正如我提到的，实际表要大得多（tdTimes的长度> 15,000），因此IE需要大约8,000ms才能将侦听器添加到每个单元中，Chrome仍然需要大约3,000ms。在许多站点上，建议使用id作为选择器来加快速度，但是如您所见，我已经在使用id了，在这种情况下，我几乎不可能使用这些id，因为该表-再一次-还有更多比简单的例子复杂。
您会提出什么建议来加快这一过程？在另一篇文章中，我读到了给选择器一个上下文的提示，应该给表行一个连续的ID（“ trTime1”，“ trTime2”，...），然后记住这些行的数量，然后做一个for循环添加侦听器？就像是：
for(var i = 1; i <= trTimelength; i++) {
var tdTimes = $('.tdTime', '#trTime' + i)
tdTimes.click(
...
)
};
伙计们，谢谢您的帮助！
编辑：正如A. Wolff正确提到的那样，无法显示15,000个单元格，因此我想补充一点，这些单元格中的大多数在开始时就被隐藏了。因此，在页面加载后，我的性能没有问题。（但是不幸的是，单元仍然需要监听器）
不要将事件处理程序附加到每个单元格。这是非常低效的，并且会占用大量内存。
使用事件冒泡功能，并将处理程序附加到更高级别的元素（在这种情况下，附加到表）。
尝试类似的东西
$("table#tblid").on("click", "td.tdTime", function(e) {
console.log("Td clicked", e);
console.log(e.target);
});
注意：正如在下面的注释（@ A.Wolf）中正确提到的，这不是一次添加所有处理程序的捷径。这仅将单个处理程序添加到包含所有td元素的table元素。由于称为“事件传播”或“事件冒泡”的机制，表格可以看到子td上的click事件。与向单个元素添加处理程序相比，它使用的资源少得多，出错的可能性也少。即使稍后将td元素动态添加到表中，它也可以工作。
检查此jsFiddle：http : //jsfiddle.net/BuddhiP/prv6y/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句