如何获取具有行跨度列的表行td的值 [英] How to get the table row td's value that has a row span column
问题描述
我有一个以rowspan为起始列的表.该表在每一行的末尾都有一个按钮.单击该按钮时，应检索相应的行值.
I have a table with rowspan as a starting column. The table has a button at the end of each row. When the button is clicked, the corresponding rows values should be retrieved.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table border="1" style="text-align:center" >
<tr>
<th> Col 1 </th>
<th> Col 2 </th>
<th> Col 3 </th>
<th> Get Row Values </th>
</tr>
<tr>
<td rowspan="2" class="col1"> 1 </td>
<td class="col2"> 2 </td>
<td class="col3"> 3 </td>
<td> <button class="get-value"> Alert values </button> </td>
</tr>
<tr>
<td class="col2"> 5 </td>
<td class="col3"> 6 </td>
<td> <button class="get-value"> Alert values </button> </td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('.get-value').on("click",function(){
var col1val = $(this).parents('tr').find('.col1').text();
var col2val = $(this).parents('tr').find('.col2').text();
var col3val = $(this).parents('tr').find('.col3').text();
alert("Col1 :" + col1val + " Col2 :" + col2val + " Col3 :"+ col3val);
});
</script>
</body>
</html>
单击第一行按钮时，它将检索所有三列的值.但是，当单击第二行按钮时，无法检索到rowpan列的值.
When the first row button is clicked, it is retrieving all the three columns values. But when the second row button is clicked, the rowspan column value could not be retrieved.
推荐答案
我要添加一个row1, row2e.t.c.每个行"的类.然后，使用$('.row'+index+'.col1')选择器很容易获得rowspan单元格的值.检查一下:
I would add a row1, row2 e.t.c. class for each "row". Then it's easy to get the value of the rowspan cells with a $('.row'+index+'.col1') selector. Check this:
$('.get-value').on("click",function(){
var index = $('.get-value').index($(this))+1;//+1 because index is zero-based
var col1val = $('.row'+index+ '.col1').text();
var col2val = $('.row'+index+ '.col2').text();
var col3val = $('.row'+index+ '.col3').text();
alert("Col1 :" + col1val + " Col2 :" + col2val + " Col3 :"+ col3val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" style="text-align:center" >
<tr>
<th> Col 1 </th>
<th> Col 2 </th>
<th> Col 3 </th>
<th> Get Row Values </th>
</tr>
<tr>
<td rowspan="2" class="col1 row1 row2"> 1 </td>
<td class="col2 row1"> 2 </td>
<td class="col3 row1"> 3 </td>
<td> <button class="get-value"> Alert values </button> </td>
</tr>
<tr>
<td class="col2 row2"> 5 </td>
<td class="col3 row2"> 6 </td>
<td> <button class="get-value"> Alert values </button> </td>
</tr>
</table>
这篇关于如何获取具有行跨度列的表行td的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
