jquery - 如何在使用 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>