Question

我有一个数据显示在html表中。数据来自使用ajax请求的第三方服务器（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);

                });

因此，项目显示如下

产品 | 日期 | 数量 |的成本

A | 12-01-2015 | 2 | 2100

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

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

产品 | 日期 | 数量 |的成本

A | 12-01-2015 | 2 | 2,100.00

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

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

Updated1 替代品：我在这里创建了一个替代方案，我在数组中为计算总数添加了一个变量，服务器将其作为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 $.each jquery each来遍历json对象。请参阅jquery loop on Json data using $.each和jQuery looping .each() JSON key/value not working

＆＃13;

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>');
  
});

＆＃13;

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

＆＃13;

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

＆＃13;

jsfiddle output

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

Answer 2

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

自动追加显示总计算的表格行（在底部）

2 个答案:

说明：

根据OP问题更新