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