如何获取具有行跨度列的表行td的值

Question

我有一个以rowspan为起始列的表。 该表在每行末尾都有一个按钮。 单击该按钮时，应检索相应的行值。

 <!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列的值。

Answer 1

我会为每个“行”添加row1, row2等类。 然后，使用$('.row'+index+'.col1')选择器很容易获得rowspan单元格的值。 检查一下：

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

Answer 2

您可以将函数的第一行更改为

var col1val = $(this).parents('table').find('.col1').text();

 <!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('table').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>

如何获取具有行跨度列的表行td的值

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-03-06 13:33:42

解决方案2
1 2017-03-06 13:21:34

如何获取具有行跨度列的表行td的值

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-03-06 13:33:42

解决方案2 1 2017-03-06 13:21:34

解决方案1
2 已采纳 2017-03-06 13:33:42

解决方案2
1 2017-03-06 13:21:34