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

我有一个以rowspan作为起始列的表格。该表在每行的末尾都有一个按钮。点击按钮时，应该检索相应的行值。如何获得具有行跨度列的表格行td的值

<!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>

当点击第一行按钮，它在检索全部三倍的值。但是，当单击第二行按钮时，无法检索rowspan列值。

来源

2017-03-06 codegeek

什么结果你期待，因为它似乎只是正常工作 –

这是因为第二个按钮不具有相同的父行的第一个按钮。一个更简单的方法是将大的td（Col 1）分配给一个ID，然后从两个按钮中以这种方式进行定位。 – freginold

@Carsten＆Craig它不能正常工作...... – Teemu

我想补充一个row1, row2 e.t.c.每个“行”的类。然后用$('.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>

来源

2017-03-06 13:33:42

您可以将功能的第一行更改为

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>

来源

2017-03-06 13:21:34 Mischa

，这只是我提到的一个例子，但在我的应用程序中，表格很大，有很多行跨度列，在这种情况下，上述解决方案不会工作 – codegeek

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

回答

相关问题