javascript - 单击目标列 JQuery 时从另一列获取值

Question

当用户单击“数字”列时，我希望能够在同一行中获取“名称”列的值。因此，例如，如果我单击“999”，我希望能够找到 David。

$('#table').on('click', 'td:nth-child(2)', function()
{
	row = $(this).text();
  alert(row);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
	<thead>
		<td>Name</td>
		<td>Number</td>
		<td>Address</td>
	</thead>
	<tbody>
		<tr>
			<td>David</td>
			<td>999</td>
			<td>Street 1</td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>555</td>
			<td>Street 3</td>
		</tr>
		<tr>
			<td>Jessica</td>
			<td>068</td>
			<td>Street 5</td>
		</tr>
	</tbody>
</table>

Answer 1

您可以使用 $(this).closest('tr').find('td:first').text() 获取最接近的第一个 td 及其文本。

如果想要的项目在 tr 中但您不知道位置或者动态想要它，您可以将类或 id 添加到名称 td 并将代码更改为 this $(this).closest ('tr').find('#WantedRowId').text()

$('#table').on('click', 'td:nth-child(2)', function() {
  alert($(this).closest('tr').find('td:first').text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
  <thead>
    <td>Name</td>
    <td>Number</td>
    <td>Address</td>
  </thead>
  <tbody>
    <tr>
      <td>David</td>
      <td>999</td>
      <td>Street 1</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>555</td>
      <td>Street 3</td>
    </tr>
    <tr>
      <td>Jessica</td>
      <td>068</td>
      <td>Street 5</td>
    </tr>
  </tbody>
</table>