添加事件侦听器以动态创建 table 行

Question

我有一个 table 和 ajax 调用来在 tbody 元素中创建行。我在 html 页面上创建了 table。

<table id='mytable'>
<thead>
<tr>
<th>First Col</th>
<th>Second Col</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

我的 javascript 代码将事件附加到 tbody 中每行的第二个单元格

$('#mytable tbody').on( 'click', 'tr td:eq(2)',  function() {
    console.log($(this).html())
});

此代码仅适用于 tbody 第一行的第二个单元格。单击所有其他行的第二个单元格不会触发该事件。我必须通过检查单元格索引

来解决这个问题

if (this.cellIndex == 2) console.log($(this).html())

我还想知道如何正确选择。

Answer 1

到select每行的具体td使用nth-child()而不是eq():

$('#mytable tbody').on( 'click', 'tr td:nth-child(3)',  function() {
  console.log($(this).html())
});

Answer 2

您可以只为整个 table 设置一个事件侦听器，然后测试单击的内容。将事件侦听器添加到 table 如果 table 的内容发生变化，则无需再次分配它。

添加 class 名称既可以提高可用性（设置光标样式），也可以更轻松地使用 JS 查找元素。

document.getElementById('mytable').addEventListener('click', e => {
  let td = e.target.closest('td[class="clickable"]');
  if (td) {
    console.log(e.target.innerText, 'was clicked');
  }
});

td.clickable {
  cursor: pointer;
}

<table id='mytable'>
  <thead>
    <tr>
      <th>First Col</th>
      <th>Second Col</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First</td>
      <td class="clickable">Second 1</td>
    </tr>
    <tr>
      <td>First</td>
      <td class="clickable">Second 2</td>
    </tr>
    <tr>
      <td>First</td>
      <td class="clickable">Second 3</td>
    </tr>
    <tr>
      <td>First</td>
      <td class="clickable">Second 4</td>
    </tr>
  </tbody>
</table>

添加事件侦听器以动态创建 table 行

Add event listener to dynamically create table row

javascript

jquery

jquery-selectors