count duplicate value from table column using jquery or javascript and pass to rowspan

Question

I want to count duplicate value from table column and pass to rowspan using javascript or jQuery.

$(document).ready(fu         


        

Answer 1

Here is an example using jQuery and I will give an explanation below it:

$(document).ready(function() {
    let tr = $('tr');
    let vals = [];

    tr.each(function() {

        let td = $(this).find('td');
        td.each(function() {
            let val = $(this).text();
            if(isNaN(val)) {
                return;
            }
            else {
                let obj = _.find(vals, elt => elt.number === val);
                if(obj) {
                    obj.count += 1;
                }
                else {
                    vals.push({
                        number: val,
                        count: 1
                    });
                }
            }
        });
    });

    let finalArr = [];

    vals.forEach(function(elt) {
        let count = elt.count;
        let num = elt.number;
        $('tr').each(function() {
            let td = $(this).find('td');
            td.each(function() {
                let val = $(this).text();
                if($.inArray(val, finalArr) === -1 && !isNaN(val) && !$(this).hasClass('added') && val === elt.number) {
                    finalArr.push(val);
                    $(this).parent('tr').append(`<td class='added' rowspan=${count}>${count}</td>`);

                }
                else {
                    return;
                }
            });
        });
    });

});

We can first create an array of unique values that are within each table data. If there is a unique value, we will add it to the vals array which will store objects representing the number that is unique and the "count" which is the number of times it occurs. If we see that number again during iteration, we will add to the count. After we are done iterating through each row we create a final array. We then iterate through our vals and retrieve the number of times it occurs and store it in the "count" variable. We then iterate through each table row and table data element again, and if the number is unique, we add that count the current count to parent element of the array we are currently doing iteration on if it is equal to the current number we are operating on in the vals array that stores the objects we created earlier. Lastly, we simply append a table data element to the parent table row of the element we are working with a rowspan that is equal to our count, and we can insert the value for how many times that number occurs. Of course, if you don't want to insert a value, you can simply keep the inner text of the table data element blank.

Answer 2

Here is mine

var startIndex = 0;
var lastValue;
var rows = $('tbody > tr');
$.each(rows, function(currentIndex, row){
  var cells = row.cells
  var value = cells[0].textContent + cells[1].textContent + cells[2].textContent;
   if(!lastValue)
      lastValue = value;
   
   if(value != lastValue){
      $(rows[startIndex]).append('<td rowspan='+ (currentIndex - startIndex  ) +' >'+ (currentIndex - startIndex) +'</td>')
      startIndex = currentIndex
      lastValue = value
   }
   
   if (currentIndex == rows.length -1){
      $(rows[startIndex]).append('<td rowspan='+ (currentIndex - startIndex + 1  ) +' >'+ (currentIndex - startIndex + 1) +'</td>')
   }
})

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

td, th {
  border: 1px solid #ffffdffffd;
  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>
  </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>ffffd</td>
    <td>Plumber</td>
  </tr>
   <tr>
    <td>8787</td>
    <td>ffffd</td>
    <td>Plumber</td>
  </tr>
   <tr>
    <td>8787</td>
    <td>ffffd</td>
    <td>Plumber</td>
  </tr>
   <tr>
    <td>8787</td>
    <td>ffffd</td>
    <td>Plumber</td>
  </tr>
   <tr>
    <td>8787</td>
    <td>ffffd</td>
    <td>Plumber</td>
  </tr>
  </tbody>
</table>

Answer 3

here is the result of dynamic group data row count.

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
</head>
<body>
<table id="tbl1" border="1px">
<tr><th>visa no </th>
<th>country</th>
<th>category</th>
</tr>
<!-- 1st -->
<tr><td>123456</td>
<td>pakistan</td>
<td>plumber</td></tr>
<!-- 2n -->
<tr><td>123456</td>
    <td>pakistan</td>
    <td>plumber</td></tr>
    <!-- 3rd -->
<tr><td>123456</td>
    <td>pakistan</td>
    <td>plumber</td></tr>
<!-- 4 -->
<tr><td>123456</td>
<td>pakistan</td>
<td>plumber</td></tr>
<!-- 5 -->
<tr><td>654321</td>
<td>india</td>
<td>plumber</td></tr>
<!-- 6 -->
<tr><td>654321</td>
<td>india</td>
<td>plumber</td></tr>
<!-- 7 -->
<tr><td>654321</td>
<td>india</td>
<td>plumber</td></tr>
<!-- 8 -->
<tr><td>654321</td>
    <td>india</td>
    <td>plumber</td></tr>
    <!-- 9 -->
    <tr><td>654321</td>
        <td>india</td>
        <td>plumber</td></tr>
        <!-- 10-->
        <tr><td>6543217</td>
            <td>india</td>
            <td>plumber</td></tr>
            <!-- 11-->
            <tr><td>6543217</td>
                <td>india</td>
                <td>plumber</td></tr>

                <tr><td>1234d563</td>
                    <td>pakistan</td>
                    <td>plumber</td></tr>
                    <tr><td>1234d563</td>
                        <td>pakistan</td>
                        <td>plumber</td></tr>
                        <tr><td>1234d563</td>
                            <td>pakistans</td>
                            <td>plumber3</td></tr>
</table>


</body>
</html>
<script>
$(document).ready(function(){
var id = 0;
var id2 =0;
var id3 =0;
var counts=0;
var myarry =[];
var el = {};
var valCell=0;

/*var first = $('#tbl1 td:first-child');
var second = $('#tbl1 td:nth-child(2)');
var third = $('#tbl1 td:nth-child(3)');

modifyTableRowspan(first);
modifyTableRowspan(second);
modifyTableRowspan(third);*/

   $("tbody tr").each(function() {
        // get row
        var rows = $(this);
        var row = $(this).next();

        // get first and second td
        var first = row.find('td:first-child').text();
        var second = row.find('td:nth-child(2)').text();
        var third = row.find('td:nth-child(3)').text();

//if exists, remove the tr
        if(el[first + second + third]) {
            myarry.push(el);

         //  $(this).remove(); wait

        }
        else {
              var c = (myarry.length) + 1;
              //$('#tbl1 tr').eq(0).append("<td rowspan='"+c+"'>some new data</td>");
          console.log(c);

            if(id2 == 0)
            {
              //alert('zero:'+id);
            //rows.append("<td rowspan='"+id+"'>some new data</td>");
            if(id2==0){
$('#tbl1 tr').eq(id).append("<td rowspan='"+c+"'>Via</td>");
            }else{
            $('#tbl1 tr').eq(id).append("<td rowspan='"+c+"'>some new data "+c+"</td>");
            id2=1;
          }
            id = c;
id2=c;
          }
          else {

            //rows.append("<td rowspan='"+c+"'>some new data</td>");
            $('#tbl1 tr').eq(id).append("<td rowspan='"+c+"'>some new data "+c+"</td>");


            id = id + c;

          }
          el[first + second + third] = 1;
         myarry =[];

        }


   });
   id=0;
});

function modifyTableRowspan(column) {

        var prevText = "";
        var counter = 0;

        column.each(function (index) {


            var textValue = $(this).text();

            if (index === 0) {
                prevText = textValue;
            }

            if (textValue !== prevText || index === column.length - 1) {

                var first = index - counter;

                if (index === column.length - 1) {
                    counter = counter + 1;
                }

                column.eq(first).attr('rowspan', counter);


                if (index === column.length - 1)
                {
                    for (var j = index; j > first; j--) {
                        column.eq(j).remove();
                    }
                }

                else {

                    for (var i = index - 1; i > first; i--) {
                        column.eq(i).remove();
                    }
                }

                prevText = textValue;
                counter = 0;
            }

            counter++;

        });

    }
</script>

Answer 4

you can do this by using selectors

$('#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 #ffffdffffd;
  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>ffffd</td>
    <td>Plumber</td>
     <td></td>
  </tr>
   <tr>
    <td>8787</td>
    <td>ffffd</td>
    <td>Plumber</td>
  </tr>
   <tr>
    <td>8787</td>
    <td>ffffd</td>
    <td>Plumber</td>
  </tr>
   <tr>
    <td>8787</td>
    <td>ffffd</td>
    <td>Plumber</td>
  </tr>
   <tr>
    <td>8787</td>
    <td>ffffd</td>
    <td>Plumber</td>
  </tr>
  </tbody>
</table>

</body>
</html>