自动附加表格行（底部）显示总计算量

Question

我有一个要在 html 表中显示的数据。数据来自使用 ajax 请求的 3rd 方服务器（php）。使用以下代码可以很好地显示数据： HTML：

 <table id="tbl-product">
   <tr>
         <th>product</th>
         <th>date</th>
         <th>quantity</th>
         <th>cost</th>
    </tr>
 </table>

成功时将显示数据中的 ajax 调用 (success: function(data, status, jqXHR){)：

data.forEach(function(row) {
                    var productname = row.uproducts_product;
                    var productico = productname.replace(/\s+/g, "-") + '.png';
                    
                    var productcost = row.uproducts_total_investment;
                    
                    var str = '<tr>'; 
                    str += '<td>' + '<img class="product_icon" src="images/products/icon-'+ productico +'">' + '<div class="productname">'+ row.uproducts_product + '</div></td>';
                    str += '<td><div class="textinfo ">' + row.date + '<br/><span class="date">' +  row.uproducts_date + '</span></div> </td>';
                    str += '<td><span class="textinfo">' + row.uproducts_quantity + '</span></td>';
                    str += '<td><span class="textinfo">' + productcost + '</td>';
                    str += '</tr>';
                    
                    $('#tbl-product').append(str);
                   
                });

所以，项目是这样显示的

产品 | 日期 | 数量 | 费用

一个 | 12-01-2015 | 2 | 2,100

B | 01-04-2016 | 4 | 5,300

但在产品项目下方，我想添加一行自动计算总数量和总成本。示例：

产品 | 日期 | 数量 | 费用

一个 | 12-01-2015 | 2 | 2,100.00

B | 01-04-2016 | 4 | 5,300.00

总计 | 6（数量）| 7,400.00（成本）

Updated1 Alternatives：我在这里创建了一个替代方案，我在数组中添加了一个变量来计算总和，服务器将其作为 json 数据响应。 所以数据现在看起来像这样：

[{
"id":"11",
"user_id":"8000",
"product":"Shoes A",
"quantity":"1",
"open":"2015-01-04",
"investment":"3000"
},

{
"id":"12",
"user_id":"8000",
"product":"Shoes B",
"quantity":"1",
"date":"2015-03-01",
"cost":"1500"
},
{
"total_qty":"2"
"total_cost":"4500"
}]

那么，如果我使用这种方法，是否更容易将其作为一行附加到产品项下方？怎么样？

Answer 1

您必须在 foreach 循环之前为数量和总计声明变量，然后为其添加值。最后在每个循环之后附加一个新的 tr 值。

您的代码如下所示：

var qty = 0,
  total = 0;

data.forEach(function(row) {
  var productname = row.uproducts_product;
  var productico = productname.replace(/\s+/g, "-") + '.png';
  var productcost = row.uproducts_total_investment;
  var str = '<tr>';
  str += '<td>' + '<img class="product_icon" src="images/products/icon-' + productico + '">' + '<div class="productname">' + row.uproducts_product + '</div></td>';
  str += '<td><div class="textinfo ">' + row.date + '<br/><span class="date">' + row.uproducts_date + '</span></div> </td>';
  str += '<td><span class="textinfo">' + row.uproducts_quantity + '</span></td>';
  str += '<td><span class="textinfo">' + productcost + '</td>';
  str += '</tr>';
  if (!isNaN(row.uproducts_quantity))
    qty += parseFloat(row.uproducts_quantity);
  if (!isNaN(productcost))
    total += parseFloat(productcost);

  $('#tbl-product').append(str);
});
$('#tbl-product').append('<tr><td colspan="2">Total</td><td>' + qty + '</td><td>' + total.toFixed(2) + '</td></tr>');

说明：

• var qty = 0, total = 0; 声明变量并将其值设置为 0。 More details。
• if (!isNaN(row.uproducts_quantity)) 会检查是否 row.uproducts_quantity 值是否为数字。 More details。
• parseFloat(row.uproducts_quantity) 会将字符串转换为 整数。 More details。
• qty += parseFloat(row.uproducts_quantity); 会将值添加到 qty 每个循环中的变量。
• total.toFixed(2) 将数字转换为字符串，保持 只有两位小数。 More Details

---

根据 OP 问题更新更新

首先，您的 json 数据格式不正确。第二个你可以使用 jquery $.eachjquery each 来遍历 json 对象。参考jquery loop on Json data using $.each和jQuery looping .each() JSON key/value not working

var data = [{
"id":"11",
"user_id":"8000",
"product":"Shoes A",
"quantity":"1",
"open":"2015-01-04",
"date":"2015-01-04",
"cost":"3000"
},

{
"id":"12",
"user_id":"8000",
"product":"Shoes B",
"quantity":"1",
"open":"2015-01-04",
"date":"2015-03-01",
"cost":"1500"
}];

$(function(){
  var qty = 0,
  total = 0;

$.each(data, function(i, row) {
  var productname = row.product;
  var productico = productname.replace(/\s+/g, "-") + '.png';
  var productcost = row.cost;
  var str = '<tr>';
  str += '<td>' + '<img class="product_icon" src="images/products/icon-' + productico + '">' + '<div class="productname">' + productname + '</div></td>';
  str += '<td><div class="textinfo ">' + row.date + '<br/><span class="date">' + row.open + '</span></div> </td>';
  str += '<td><span class="textinfo">' + row.quantity + '</span></td>';
  str += '<td><span class="textinfo">' + productcost + '</td>';
  str += '</tr>';
  if (!isNaN(row.quantity))
    qty += parseFloat(row.quantity);
  if (!isNaN(productcost))
    total += parseFloat(productcost);

  $('#tbl-product').append(str);
});
$('#tbl-product').append('<tr><td colspan="2">Total</td><td>' + qty + '</td><td>' + total.toFixed(2) + '</td></tr>');
  
});

table {
  width:100%;
  border-collapse:collapse;
}
table th, table td {
  border:1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl-product">
   <tr>
         <th>product</th>
         <th>date</th>
         <th>quantity</th>
         <th>cost</th>
    </tr>
 </table>

jsfiddle output.

只需将 json 对象与我在此处创建的示例对象进行比较即可。如果您使用for (i=0; i > (obj.length-1); i++) 循环并最终获得总行的最后一个对象键和值，则可以使用服务器端的总和。

Answer 2

无法自动显示摘要。您需要在服务器端创建其他变量，然后从列表对象计算值到该变量。将汇总变量作为普通行绑定到 html。