从生成的html表中选择一行

Select a row from a generated html table

本文关键字：一行 选择 html      更新时间：2023-09-26

在这个堆栈中，有一个使用jQuery从表中选择并突出显示整行的解决方案。当我单击表上的一行时，我有一个回调(请参阅脚本的底部)。问题是我的表是从数据生成的，所以回调不能对生成的单元格起作用。回调处理的是不生成的头。

如何将现有的回调附加到新生成的元素?

<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');
});

这是事件委托模式的完美用例。也就是说，您可以在父元素(表)上定义单击回调，而不是在每个元素上定义回调(在您的例子中，每个表行)。

这样，当一个点击事件发生时，它就会弹出dom树，并且父元素可以响应它。

的例子:

// Attach a delegated event handler
$( "#table" ).on( "click", "tr", function( event ) {
    event.preventDefault();
    ...
});

这允许我们为所有当前和未来的表行附加单个单击事件处理程序。

相关文章：