Question

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

request.env["REQUEST_METHOD"]   # => "DELETE"

单击第一行按钮时，它将检索所有三列值。但是，当单击第二行按钮时，无法检索rowspan列值。

Answer 1

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

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

＆＃13;

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

＆＃13;

如何获取具有行范围列的表行td的值

2 个答案: