Question

我有一张包含多个<tr>的表，每个表都有几个<td>个。这些列的内容可以是另一个html元素（例如文本框）或只是文本。

我的问题：如何在此列中获取一个单击元素的其余兄弟姐妹？我的意思是，我怎么知道这个元素属于哪个<tr>，<tr>＃3或<tr>＃5？我没有每个<tr>的索引来控制

示例：

如果我点击第5行第1列的文本框，我希望第5行第2列的内容发生变化。我不知道怎么做，因为我的<tr>没有索引。

Answer 1

使用jQuery，将其添加到事件处理程序中。这将为您提供表格单元格的集合：

var columns = $(this).closest('tr').children();

// .eq() is 0-based, so this would retrieve the fourth column
columns.eq(3);

Answer 2

您可以使用index()函数找到行的索引。

$('input').click(function(){
   var index = $(this).parents('tr').index();
  alert('you click an input on row #' + index);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="text"></td>
    <td></td>
   </tr>
  <tr>
    <td><input type="text"></td>
    <td></td>
   </tr>
  <tr>
    <td><input type="text"></td>
    <td></td>
   </tr>
</table>

Answer 3

使用closest获取父TR元素。

$('your_element').click(function(){
  var tr = $(this).closest('tr');
  var element1 = $(tr).find('element_to_find');
});

Answer 4

您还可以使用：eq运算符来查找td。

$('your_element').click(function() {
    var tr = $(this).closest('tr');
    var col3 = $("td:eq(2)", tr);
}

如何获取表中单击的元素

4 个答案: