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

Question

我想计算表列中的重复值并使用javascript 或jQuery 传递给rowspan。

$(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 =[];

        }


    });

});

here what i want in actual

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>

Answer 2

这是一个使用 jQuery 的示例，我将在下面给出解释：

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

});

我们可以首先在每个表数据中创建一个唯一值数组。如果有唯一值，我们会将其添加到 vals 数组中，该数组将存储表示唯一数字和“计数”的对象，即它出现的次数。如果我们在迭代期间再次看到该数字，我们将添加到计数中。在我们完成对每一行的迭代之后，我们创建一个最终数组。然后我们遍历我们的 val 并检索它出现的次数并将其存储在“count”变量中。然后我们再次遍历每个表行和表数据元素，如果数字是唯一的，我们将当前计数添加到我们当前正在迭代的数组的父元素中，如果它等于我们正在操作的当前数字on 在存储我们之前创建的对象的 vals 数组中。最后，我们只需将一个表数据元素附加到我们正在使用的元素的父表行，其行跨度等于我们的计数，我们可以插入该数字出现的次数的值。当然，如果您不想插入值，您可以简单地将表格数据元素的内部文本保留为空白。

Answer 3

这是我的

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 #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>
  </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>
  </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>

Answer 4

这是动态组数据行计数的结果。

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