使用jQuery选择时如何获取表格单元格的值

Question

我有下表，我需要获取所选单元格旁边的单元格的文本值，基本上如果单击2，它需要显示它旁边的单元格的值eric等等。下表是动态填充的示例数据，我认为我不能为特定<td>提供ID。

$('#inputTable').on('click', 'tbody tr', function (e) {
  e.preventDefault();
  var rowIndex = $(this).find('span').text();
  alert(rowIndex);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<table class="ui compact celled definition table" id="inputTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><span>Mike</span></td>
    </tr>
    <tr>
      <td>2</td>
      <td><span>eric</span></td>
    </tr>
    <tr>
      <td>3</td>
      <td><span>jonas</span></td>
    </tr>
  </tbody>
</table>

由于我不知道如何找到点击区域旁边的单元格，我使用<span>来查找文本的值。

Answer 1

您需要使用更具体的选择器（例如body tbody td:first-child）。这将选择每个<td>中的第一个 <tr>元素，并使用siblings()我们可以选择行中的下一个元素。

以下内容可行：

$('#inputTable').on('click', 'tbody tr td:first-child', function(e) {  
    var text = $(this).siblings('td').find('span').text();
    alert(text);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="ui compact celled definition table" id="inputTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><span>Mike</span></td>
    </tr>
    <tr>
      <td>2</td>
      <td><span>eric</span></td>
    </tr>
    <tr>
      <td>3</td>
      <td><span>jonas</span></td>
    </tr>
  </tbody>
</table>

请注意，您还需要关闭<span>元素，即：<span>jonas</span>

Answer 2

tbody tr变为tbody td:first-child：如果您想将点击事件仅附加到第一列。可以省略tr，因为您已经tbody将其与表标题行区分开来。

$(this).next().find('span').text()：从该行的第一列开始，找到下一列，然后获取其<span>元素的内容。

$('#inputTable').on('click', 'tbody td:first-child', function (e) {
  e.preventDefault();
  var rowIndex = $(this).next().find('span').text();
  alert(rowIndex);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<table class="ui compact celled definition table" id="inputTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><span>Mike</span></td>
    </tr>
    <tr>
      <td>2</td>
      <td><span>eric</span></td>
    </tr>
    <tr>
      <td>3</td>
      <td><span>jonas</span></td>
    </tr>
  </tbody>
</table>

Answer 3

请尝试以下代码：

$(document).ready(function() {
  $('#inputTable tr').on('click', function(e) {
    e.preventDefault();
    var rowIndex = $(this).find('span').text();
    alert(rowIndex);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="ui compact celled definition table" id="inputTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><span>Mike<span></td>
    </tr>
    <tr>
      <td>2</td>
      <td><span>eric<span></td>
    </tr>
    <tr>
      <td>3</td>
      <td><span>jonas<span></td>
    </tr>
  </tbody>
</table>