通过跨行在td中获得价值

时间：2018-12-18 17:05:10

标签： javascript jquery html

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

$('.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();
   var col4val = $(this).parents('tr').find('.col4').text();
   alert("Col1 :" + col1val + " Col2 :" + col2val + " Col3 :"+ col3val + " Col4 :" + col4val);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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> Col 4 </th>
    <th> Get Row Values </th>
  </tr>
  <tr>
    <td rowspan="5" class="col1"> 1 </td>
    <td class="col2"> 2 </td>
    <td rowspan="2" class="col3"> 4 </td>
    <td class="col4"> 5 </td>
    <td  rowspan="2" > <button class="get-value"> Alert 1 </button> </td>
 </tr>
  <tr>
    <td class="col2"> 3 </td>
    <td class="col3"> 6 </td>
  <tr>
    <td class="col2"> 10 </td>
    <td rowspan="3" class="col3"> 13 </td>
    <td class="col4"> 14 </td>
  <tr>
    <td class="col2"> 11 </td>
    <td class="col3"> 15 </td>
 </tr>    
  <tr>
    <td class="col2"> 12 </td>
    <td class="col3"> 16 </td>
    <td rowspan="2" > <button class="get-value"> Alert 2 </button> </td>
 </tr>    
</table>

单击警报1或警报2时，不会检索到所有值

  

警报1我想要结果1,2,3,4,5,6

     

警报2我想要结果1,10,11,12,13,14,15,16

向here学习，但不相同

帮助

2 个答案:

答案 0 :(得分：0)

您的代码中有几个问题。首先，您需要行，但是您正在计算列。然后，您应该在获取表时仅获得父tr。

在这里，我为您重构了它。随意问你是否不懂。

function parseAndRemoveDuplicates(arr) {
    arr = arr.split(" ").filter(e=>e)
    arr = arr.filter((v,i) => arr.indexOf(v) == i).join(" ");
    return arr;
}

$('.get-value').on("click",function(){
       var row1val = $(this).parents('table').find('.row1').text();
       var row2val = $(this).parents('table').find('.row2').text();
       var row3val = $(this).parents('table').find('.row3').text();
       var row4val = $(this).parents('table').find('.row4').text();
       var row5val = $(this).parents('table').find('.row5').text();
       var rowsValues = "Row1 :" + row1val + " Row2 :" + row2val + " Row3 :"+ row3val + " Row4 :" + row4val + " Row5 :" + row4val;
       var alert1 = parseAndRemoveDuplicates(row1val + row2val);
       var alert2 = parseAndRemoveDuplicates(row3val + row4val + row5val);
       console.log(alert1);
       console.log(alert2);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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> Col 4 </th>
      <th> Get Row Values </th>
    </tr>
    <tr>
      <td rowspan="5" class="row1 row2 row3 row4 row5"> 1 </td>
      <td class="row1"> 2 </td>
      <td rowspan="2" class="row1 row2"> 4 </td>
      <td class="row1"> 5 </td>
      <td  rowspan="2" > <button class="get-value"> Alert 1 </button> </td>
   </tr>
    <tr>
      <td class="row2"> 3 </td>
      <td class="row2"> 6 </td>
    <tr>
      <td class="row3"> 10 </td>
      <td rowspan="3" class="row3 row4 row5"> 13 </td>
      <td class="row3"> 14 </td>
    <tr>
      <td class="row4"> 11 </td>
      <td class="row4"> 15 </td>
   </tr>    
    <tr>
      <td class="row5"> 12 </td>
      <td class="row5"> 16 </td>
      <td rowspan="2" > <button class="get-value"> Alert 2 </button> </td>
   </tr>    
  </table>

这是一个更好的版本：

function parseAndRemoveDuplicates(arr) {
    arr = arr.split(" ").filter(e=>e)
    arr = arr.filter((v,i) => arr.indexOf(v) == i).join(" ");
    return arr;
}

function getValuesFromRows(obj, rowclasses) {
       var table = $(obj).parents('table');
       return parseAndRemoveDuplicates(table.find(rowclasses).text());
}

$('.get-value').on("click",function(){
       var alert1 = getValuesFromRows(this, '.row1,.row2');
       var alert2 = getValuesFromRows(this, '.row3,.row4,.row5');
       console.log(alert1);
       console.log(alert2);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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> Col 4 </th>
      <th> Get Row Values </th>
    </tr>
    <tr>
      <td rowspan="5" class="row1 row2 row3 row4 row5"> 1 </td>
      <td class="row1"> 2 </td>
      <td rowspan="2" class="row1 row2"> 4 </td>
      <td class="row1"> 5 </td>
      <td  rowspan="2" > <button class="get-value"> Alert 1 </button> </td>
   </tr>
    <tr>
      <td class="row2"> 3 </td>
      <td class="row2"> 6 </td>
    <tr>
      <td class="row3"> 10 </td>
      <td rowspan="3" class="row3 row4 row5"> 13 </td>
      <td class="row3"> 14 </td>
    <tr>
      <td class="row4"> 11 </td>
      <td class="row4"> 15 </td>
   </tr>    
    <tr>
      <td class="row5"> 12 </td>
      <td class="row5"> 16 </td>
      <td rowspan="2" > <button class="get-value"> Alert 2 </button> </td>
   </tr>    
  </table>

答案 1 :(得分：0)

以下代码通过让每个警报按排序顺序提供数值来修正Nelson Teixeira的第一个答案。另外，当您单击每个警报时，现在代码仅提供与特定警报相对应的数据，如下所示：

function parseAndRemoveDuplicates(arr) {
  arr = arr.split(" ").filter(e => e)
  arr = arr.filter((v, i) => arr.indexOf(v) == i).sort().join(" ");
  return arr;
}

function getValuesFromRows(obj, rowclasses) {
  var table = $(obj).parents('table');
  return parseAndRemoveDuplicates(table.find(rowclasses).text());
}
$('#but1').on("click", function() {
  var alert1 = getValuesFromRows(this, '.row1,.row2');
  console.log(alert1);
});
$('#but2').on("click", function() {
  var alert2 = getValuesFromRows(this, '.row3,.row4,.row5');

  console.log(alert2);



});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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> Col 4 </th>
    <th> Get Row Values </th>
  </tr>
  <tr>
    <td rowspan="5" class="row1 row2 row3 row4 row5"> 1 </td>
    <td class="row1"> 2 </td>
    <td rowspan="2" class="row1 row2"> 4 </td>
    <td class="row1"> 5 </td>
    <td rowspan="2"> <button id='but1' class="get-value"> Alert 1 </button> </td>
  </tr>
  <tr>
    <td class="row2"> 3 </td>
    <td class="row2"> 6 </td>
    <tr>
      <td class="row3"> 10 </td>
      <td rowspan="3" class="row3 row4 row5"> 13 </td>
      <td class="row3"> 14 </td>
      <tr>
        <td class="row4"> 11 </td>
        <td class="row4"> 15 </td>
      </tr>
      <tr>
        <td class="row5"> 12 </td>
        <td class="row5"> 16 </td>
        <td rowspan="2"> <button id='but2' class="get-value"> Alert 2 </button> </td>
      </tr>
</table>

为了对数值进行排序，在将数组值连接到字符串结果之前，代码对parseAndRemoveDuplicates()进行了一些微调，方法是对数组值进行排序。

诚然，让每个警报提供不同数据的解决方案，涉及的代码要比优雅的代码少，为每个按钮元素添加唯一的ID，然后为每个按钮创建相似的功能以显示相应的结果。

相关问题
最新问题