Question

我如何通过对商品名称进行分组求和？

<table border="1">
  <tr><th>ID</th><th>Name of Goods</th><th>Qty</th></tr>
  <tr><td>110</td><td>BOOK</td><td>2</td></tr>
  <tr><td>111</td><td>Pencil</td><td>1</td></tr>
  <tr><td>110</td><td>BOOK</td><td>3</td></tr>
  <tr><td>112</td><td>Ruler</td><td>3</td></tr>
  <tr><td>112</td><td>Ruler</td><td>1</td></tr>
</table>

Answer 1

您可以使用each tr和filter来实现您的要求：

   $("button").click(function(){
   var group = [];
   $("tr").each(function(index,item){
       if(index > 0){
           let id = $(item).find('td').eq(0).text();
           let name = $(item).find('td').eq(1).text();
           let count = parseInt($(item).find('td').eq(2).text());
           let exist = group.filter(c=>c.name == name)[0];
           if(exist != undefined){
            exist.count += count;
           }else{
             group.push({id : id, name: name, count : count});
           }
       }
   });
   console.log(group);
});

在表中显示结果

 $.each(group, function(index,item){
     $('#result tr:last').after('<tr>' + '<td>'+ item.id + '</td>' + '<td>'+ item.name + '</td>'+ '<td>'+ item.count + '</td>' + '</tr>');
 });

$("button").click(function(){
   var group = [];
   $("#product tr").each(function(index,item){
       if(index > 0){
           let id = $(item).find('td').eq(0).text();
           let name = $(item).find('td').eq(1).text();
           let count = parseInt($(item).find('td').eq(2).text());
           let exist = group.filter(c=>c.name == name)[0];
           if(exist != undefined){
            exist.count += count;
           }else{
             group.push({id : id, name: name, count : count});
           }
       }
   });
   $.each(group, function(index,item){
   $('#result tr:last').after('<tr>' + '<td>'+ item.id + '</td>' + '<td>'+ item.name + '</td>'+ '<td>'+ item.count + '</td>' + '</tr>');
   });
   //console.log(group);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="product" border="1">
  <tr><th>ID</th><th>Name of Goods</th><th>Qty</th></tr>
  <tr><td>110</td><td>BOOK</td><td>2</td></tr>
  <tr><td>111</td><td>Pencil</td><td>1</td></tr>
  <tr><td>110</td><td>BOOK</td><td>3</td></tr>
  <tr><td>112</td><td>Ruler</td><td>3</td></tr>
  <tr><td>112</td><td>Ruler</td><td>1</td></tr>
</table>

<button  click="sum()">Sum</button>

<table id="result" border="1">
<tbody>
  <tr><th>ID</th><th>Name of Goods</th><th>Qty</th></tr>
</tbody> 
</table>

Answer 2

您可以为表中的每个唯一“商品名称”创建一个具有一个属性的JavaScript对象。

遍历各行，如果属性名称已经存在，则将该行的“数量”添加到现有计数中；如果该属性尚不存在，则创建该属性并为该属性分配“数量”该行作为其值。

（要使用存储在counts JavaScript对象中的值，您可以使用Object.keys(counts)获取对象属性名称的数组，并循环遍历以获取存储在每个对象命名中的值属性。）

此示例显示了其全部工作原理。

// Get a list of all the `tr` elements on the page and call it `rows`
const rows = document.getElementsByTagName("TR");
// Make an empty JS object and call it `counts`
const counts = {};

// Loop through the list of `tr` elements (calling the current tr `row`)
for(let row of rows){
  // Get a list of `td` elements in the current `tr` element, and call it `cells`
  const cells = row.getElementsByTagName("TD");
  // If the current `tr` element has any `td` elements in it... 
  if(cells.length){
    const name = cells[1].innerHTML; // Contents of second `td` element
    const qty = cells[2].innerHTML; // Contents of third `td` element
    // If we've seen this name before...
    if(counts[name]){
      // Add `qty` to the existing property's value
      counts[name] += parseInt(qty);
    }
    // Otherwise...
    else {
       // Make a new property using `name` as its name and `qty` as its value
      counts[name] = parseInt(qty);
    }
  }
}

// Print contents of the `counts` object
const categories = Object.keys(counts); // Get property names
for(let category of categories){
  const count = counts[category]; // Get property values
  console.log(category + ": " + count); // Print property names and values
}

<table border="1">
  <tr><th>ID</th><th>Name of Goods</th><th>Qty</th></tr>
  <tr><td>110</td><td>BOOK</td><td>2</td></tr>
  <tr><td>111</td><td>Pencil</td><td>1</td></tr>
  <tr><td>110</td><td>BOOK</td><td>3</td></tr>
  <tr><td>112</td><td>Ruler</td><td>3</td></tr>
  <tr><td>112</td><td>Ruler</td><td>1</td></tr>
</table>

我如何通过对商品名称进行分组求和？

2 个答案: