javascript - 单击 td 函数时获取表的 ID

Question

当单击table的td时，我试图获取表的id。我的代码如下所示:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table id="table_1">
  <thead>
    <th>First Name</th>
    <th>Last Name</th>
  </thead>
  <tbody>
    <tr>
      <td onclick="editUnit()">John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>
<script>
  function editUnit() {
    let tableId = $(this).closest('table').attr('id');
    alert(tableId);
  }
</script>

我也尝试过 $(this).parents('table').attr('id'); ，但是，仍然是 undefined 的相同结果.

jsfiddle

Answer 1

您的问题是在 HTML 上内联分配监听器，当调用该函数时，this上下文未指向 td ，这就是你未定义的原因。

因此，您至少有两个选择:

• “不太好”选项:将其传递给监听器并作为函数的参数获取，如下所示:

function editUnit(td) {
  let tableId = $(td).closest('table').attr('id');
  console.log(tableId);
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table id="table_1">
  <thead>
    <th>First Name</th>
    <th>Last Name</th>
  </thead>
  <tbody>
    <tr>
      <td onclick="editUnit(this)">John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

• “更好”选项:分配 id (甚至是一个类)到 <td>并将监听器绑定(bind)到脚本部分，而不是 HTML，这样 this上下文将是正确的，如下所示:

document.getElementById("clickableTd").onclick = editUnit;

function editUnit() {
  let tableId = $(this).closest('table').attr('id');
  console.log(tableId);
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table id="table_1">
  <thead>
    <th>First Name</th>
    <th>Last Name</th>
  </thead>
  <tbody>
    <tr>
      <td id="clickableTd">John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>