如何获得使用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）。这将选择每个<tr>中的第一个<td>元素，并使用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>