在此stack有一个解决方案可以使用 jQuery 从表中选择并突出显示整行。当我单击表格上的一行时，我有一个回调(请参阅脚本的底部)。 问题是我的表格是从数据生成的，因此回调不适用于生成的单元格。回调适用于未生成的 header 。
如何将现有回调附加到新生成的元素？
<style>
.selected {
background-color: brown;
color: #FFF;
}
</style>
<body>
<table id="table" border="1" ContentEditable>
<tbody id="tablebody">
<tr>
<th>Date</th>
<th>Number</th>
</tr>
</tbody>
</table>
<button onclick="generateTable()">generateTable</button>
<script>
function generateTable() {
var tbl = document.getElementById('table')
var tbdy = document.getElementById('tablebody')
//Table elements
var arr={Date: "my date", Number:"my number"}
var tr = document.createElement('tr');
for (el in arr) {
var td = document.createElement('td');
var t = document.createTextNode(arr[el]);
td.appendChild(t);
tr.appendChild(td);
}
//append line to tbody
tbdy.appendChild(tr);
tbl.appendChild(tbdy);
}
jQuery("#table tr").click(function(){
console.log("this works only when clocking on the headers <th>")
jQuery(this).addClass('selected')
.siblings().removeClass('selected');
});
最佳答案
这是 event delegation 的完美用例图案。也就是说，您可以在父元素(表格)上定义点击回调，而不是在每个元素(在您的例子中是每个表格行)上定义回调。
这样，当点击事件发生时，就会在dom树上冒泡，父元素就能响应。
示例:
// Attach a delegated event handler
$( "#table" ).on( "click", "tr", function( event ) {
event.preventDefault();
...
});
这允许我们为所有当前和 future 的表行附加一个单击事件处理程序。
关于javascript - 从生成的 html 表中选择一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32675313/