Question

单击id的{{1}}时，我试图获取表的td。我的代码如下：

table

我也尝试过使用<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');相同。

jsfiddle

Answer 1

如下更改代码

<td onclick="editUnit(this)">John</td>

    function editUnit(event){

  let tableId = $(event).closest('table').attr('id');
  alert(tableId);

}

Answer 2

您的问题是，在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>，并以这种方式将侦听器绑定到脚本部分（而不是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>

Answer 3

为什么不尝试使用整体jQuery。

$("td").click(function(event) {
  let tableId = $(this).closest('table').attr('id');
  alert(tableId);
})

Answer 4

您可以使用您的代码进行尝试：

<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>
    <script>
        function editUnit(event){

      let tableId = $(event).closest('table').attr('id');
      alert(tableId);
    </script>

Answer 5

您还可以使用jQuery的.parent()方法（docs）

function editUnit(){
  const tableId = $(this).parent().parent().attr('id');
  alert(tableId);
}

单击td函数时获取表的ID

5 个答案: