javascript - 使用 jquery 或 javascript 计算表列中的重复值并传递给 rowspan

Question

我想从表列中计算重复值并传递给rowspanusing javascriptor jQuery。

$(document).ready(function(){

    var myarry =[];

    var el = {};

    $("tbody tr").each(function() {

        var row = $(this).nextAll();
        var first = row.find('td').eq(0).text();
        var second =row.find('td').eq(1).text();
        var third = row.find('td').eq(2).text();
        if(el[first + second + third]) {
            myarry.push(el);

        }else {       
            var c = (parseInt(myarry.length) + parseInt(1));

            console.log(c);

            row.find('td').eq(3).attr("rowspan",2);

            el[first + second + third] = 1;

            myarry =[];

        }


    });

});

这是我实际想要的

标签： javascriptjquery

Answer 1

你可以通过使用选择器来做到这一点

$('#tableId tbody tr td:nth-child(1)');

$(document).ready(function(){
var counts={},valuesArray=[];
 $('#tableId tbody tr td:nth-child(1)').each( function(){
   //add item to array
   var colValue=$(this).text();
   if($.inArray(colValue,valuesArray)==-1){
      counts[colValue]=1;
      valuesArray.push(colValue);
      
   }
   else{
      var oldCount=counts[colValue];
      counts[colValue]= ++oldCount;
   }
   
});
valuesArray=[];
 $('#tableId tbody tr td:nth-child(4)').each( function(){
    var currentObj=$(this);
    if(currentObj.length>0){
       $('#tableId tbody tr td:nth-child(1)').each( function(){
         var colValue=$(this).text();
         debugger;
          if($.inArray(colValue,valuesArray)==-1){
           var rowspanValue=counts[colValue];
           if( currentObj.attr("rowspan")==undefined)
           {
             currentObj.attr("rowspan",rowspanValue);
             currentObj.text(rowspanValue);
             valuesArray.push(colValue);
           }
         }
       })
    }
});

});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table id='tableId'>
 <thead>
  <tr>
    <th>VISA</th>
    <th>Country</th>
    <th>Category</th>
     <th>Total VISA</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>123456</td>
    <td>abcc</td>
    <td>Plumber</td>
    <td></td>
  </tr>
  <tr>
    <td>123456</td>
    <td>abcc</td>
    <td>Plumber</td>
  </tr>
  <tr>
    <td>123456</td>
    <td>abcc</td>
    <td>Plumber</td>
  </tr>
  
  <tr>
    <td>8787</td>
    <td>ddd</td>
    <td>Plumber</td>
     <td></td>
  </tr>
   <tr>
    <td>8787</td>
    <td>ddd</td>
    <td>Plumber</td>
  </tr>
   <tr>
    <td>8787</td>
    <td>ddd</td>
    <td>Plumber</td>
  </tr>
   <tr>
    <td>8787</td>
    <td>ddd</td>
    <td>Plumber</td>
  </tr>
   <tr>
    <td>8787</td>
    <td>ddd</td>
    <td>Plumber</td>
  </tr>
  </tbody>
</table>

</body>
</html>