Question

在这个stack中，有一个解决方案，可以使用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');
});

从生成的html表中选择一行

0 个答案: