html - 获取动态加载表的列的总数

Question

我正在使用以下 jquery 加载表

function get_sales(customer_id,from_date,to_date){
         $.ajax({
            type: 'POST',
            url: 'ajax/sale_pl.php',
            data:{customer_id:customer_id,from_date:from_date,to_date:to_date},            
            dataType:"json",            
            success: function(response){ //console.log(response);                
                for(i=0; i<response.length; i++)
                {
                    $('#tdata').append('<tr>'+
                    '<td><a href="view_invoice.php?id='+response[i].invoice_id+'">'+response[i].invoice_id+'</a></td>'+
                    '<td>'+response[i].order_date+'</td>'+
                    '<td><h6 class="mb-1">'+response[i].product_name+'</h6></td>'+
                    '<td><h6 class="text-muted">'+response[i].product_code+'</h6></td>'+
                    '<td>'+response[i].sold_qty+'</td>'+
                    '<td>'+response[i].buy_price+'</td>'+
                     '<td>'+response[i].sell_price+'</td>'+                    
                    '<td>'+response[i].discount+'</td>'+                    
                    '<td>'+response[i].cost_price+'</td>'+
                    '<td>'+response[i].sold_price+'</td>'+
                    '<td class="profits">'+response[i].profit+'</td>'
                         + '</tr>'
                        );
                }                        
            }
        });
     }

这是我的表格的 html 代码

 <table class="table table-hover">
     <thead>
       <tr>
           <th>Invoice id</th>
           <th>Invoice Date</th>
           <th>Product Name</th>
           <th>Product Code</th>
           <th>Sale Qty</th>
           <th>Buy Price</th>
           <th>Sale Price</th>
           <th>Discount</th>
           <th>Cost Price</th>
           <th>Sold Price</th>
           <th>Profit</th>
          </tr>
       </thead>
       <tbody id="tdata">                                     
        </tbody>
       <tfoot>
          <tr>
             <th colspan='10'>Total Profit</th>
              <th id="total_profit">0</th>
           </tr>
         </tfoot>
        </table>                                              

我正在尝试的是获得利润栏的总数。我尝试了以下一个

function calcSub(){
    var totalProfit= 0;
    $(".profits").each(function(){
        totalPrice += parseInt($(this).val());
        $("#total_profit").html(totalPrice);
    });
};

但这不起作用。

请建议我解决方案。我是 jQuery 的新手。提前感谢您的帮助。

标签： htmljqueryjsonajaxdom

Answer 1

您需要使用.text()而不是.text() .val()。.val()当你得到一个input值时使用。但在您的情况下，它只是获取.text()您的td物品。

编辑：由于two(get_sales和calcSub()) 函数同时运行，您需要使用async函数 on 并等待awaitfor ajax 完成，success然后再继续calcSub()进行计算

将此代码添加到您的文件中：

//get sales
async function get_sales(customer_id, from_date, to_date) {
  //Await for this to finish and then call total profit
  await $.ajax({
    type: 'POST',
    url: 'color.json',
    data: {
      customer_id: customer_id,
      from_date: from_date,
      to_date: to_date
    },
    dataType: "json",
    success: function(response) { //console.log(response);                
        for (i = 0; i < response.length; i++) {
          $('#tdata').append('<tr>' +
            '<td><a href="view_invoice.php?id=' + response[i].invoice_id + '">' + response[i].invoice_id + '</a></td>' +
            '<td>' + response[i].order_date + '</td>' +
            '<td><h6 class="mb-1">' + response[i].product_name + '</h6></td>' +
            '<td><h6 class="text-muted">' + response[i].product_code + '</h6></td>' +
            '<td>' + response[i].sold_qty + '</td>' +
            '<td>' + response[i].buy_price + '</td>' +
            '<td>' + response[i].sell_price + '</td>' +
            '<td>' + response[i].discount + '</td>' +
            '<td>' + response[i].cost_price + '</td>' +
            '<td>' + response[i].sold_price + '</td>' +
            '<td class="profits">' + response[i].profit + '</td>' +
            '</tr>'
          );
        }
    }
  });
  
  //call calculate total
  calcSub()
}

get_sales();

function calcSub() {
  var totalProfit = 0;
  $(".profits").each(function() {
    totalProfit += parseInt($(this).text());
    $("#total_profit").html(totalProfit);
  });
};

根据问题完成工作演示

var response = [{
  "invoice_id": "Always Helping",
  "order_date": "03-02-2002",
  "product_name": "Always B +",
  "product_code": "[e-mail]",

  "sold_qty": "2",
  "buy_price": "2",
  "sell_price": "2",
  "discount": "2",
  "cost_price": "2",
  "sold_price": "2",
  "profit": "50",
}, {
  "invoice_id": "Blah Blah",
  "order_date": "03-02-2002",
  "product_name": "Always B +",
  "product_code": "[e-mail]",

  "sold_qty": "2",
  "buy_price": "2",
  "sell_price": "2",
  "discount": "2",
  "cost_price": "2",
  "sold_price": "2",
  "profit": "500",
}]


for (i = 0; i < response.length; i++) {
  $('#tdata').append('<tr>' +
    '<td><a href="view_invoice.php?id=' + response[i].invoice_id + '">' + response[i].invoice_id + '</a></td>' +
    '<td>' + response[i].order_date + '</td>' +
    '<td><h6 class="mb-1">' + response[i].product_name + '</h6></td>' +
    '<td><h6 class="text-muted">' + response[i].product_code + '</h6></td>' +
    '<td>' + response[i].sold_qty + '</td>' +
    '<td>' + response[i].buy_price + '</td>' +
    '<td>' + response[i].sell_price + '</td>' +
    '<td>' + response[i].discount + '</td>' +
    '<td>' + response[i].cost_price + '</td>' +
    '<td>' + response[i].sold_price + '</td>' +
    '<td class="profits">' + response[i].profit + '</td>' +
    '</tr>'
  );
}


function calcSub() {
  var totalProfit = 0;
  $(".profits").each(function() {
    totalProfit += parseInt($(this).text());
    $("#total_profit").html(totalProfit);
  });
};

calcSub()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th>Invoice id</th>
      <th>Invoice Date</th>
      <th>Product Name</th>
      <th>Product Code</th>
      <th>Sale Qty</th>
      <th>Buy Price</th>
      <th>Sale Price</th>
      <th>Discount</th>
      <th>Cost Price</th>
      <th>Sold Price</th>
      <th>Profit</th>
    </tr>
  </thead>
  <tbody id="tdata">
  </tbody>
  <tfoot>
    <tr>
      <th colspan='10'>Total Profit</th>
      <th id="total_profit">0</th>
    </tr>
  </tfoot>
</table>