Question

我有一个table，类似于以下内容

<table>
   <tr>
    <td onclick="toggleRow(this)">some text</td>
    <td onclick="toggleRow(this)">some text</td>
    <td onclick="toggleRow(this)">some text</td>
    <td>
        <input type="checkbox" onclick="toggleRow(this)" value="1" />
    </td>
  </tr>
</table>

使用Javascript：

<script>
    function toggleRow(obj) {
        console.log(obj);
    }
</script>

当我点击td时，我得到以下输出

<td onclick="toggleRow(this)">some text</td>

当我点击checkbox时，我得到以下输出

<input type="checkbox" onclick="toggleRow(this)" value="1" />

我怎样才能获得

<td onclick="toggleRow(this)">some text</td>

点击checkbox时？感谢。

Answer 1

您可以使用.closest选择器遍历到最近的td obj：

nearest：对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

function toggleRow(obj) {
    console.log($(obj).closest('td')[0]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
   function toggleRow(obj) {
    console.log($(obj).closest('td')[0]);
   }
</script>
<table>
<tr>
    <td onclick="toggleRow(this)">some text</td>
    <td onclick="toggleRow(this)">some text</td>
    <td onclick="toggleRow(this)">some text</td>
    <td>
        <input type="checkbox" onclick="toggleRow(this)" value="1" />
    </td>
</tr>

单击复选框时如何获取td的html？

1 个答案: