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

时间:2016-11-26 09:51:29

标签: jquery

我有下表,我需要获取所选单元格旁边的单元格的文本值,基本上如果单击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>来查找文本的值。

3 个答案:

答案 0 :(得分:2)

您需要使用更具体的选择器(例如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>

答案 1 :(得分:1)

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>

答案 2 :(得分:0)

请尝试以下代码:

$(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>