Question

我需要使用jquery计算表中找到的所有记录的总付款额 Here I show you the form HTML

<div class="row mt-5">
        <div class="col-md-4">
            <form role="form">
                <div class="card">
                    <div class="card-header">
                        <h4>Customer information:</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="customer_name">Customer:</label>
                                <input type="text" name="customer_name" id="customer_name" class="form-control">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="producto_name">Producto:</label>
                                <input type="text" name="producto_name" id="producto_name" class="form-control">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-4">
                                <label for="product_price">Price</label>
                                <input type="text" name="product_price" id="product_price" class="form-control">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="product_stock">Stock</label>
                                <input type="text" name="product_stock" id="product_stock" class="form-control">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="product_quantity">quantity</label>
                                <input type="number" name="product_quantity" id="product_quantity" value="1" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <input type="button" id="btnAddToList" value="Add to List" class="btn btn-primary">
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-8">
            <form role="form">
                <div class="card">
                    <div class="card-header">
                        <h5>Products:</h5>
                    </div>
                    <div class="card-body">
                        <table id="dtProduct" class="table display border border-1" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>Code</th>
                                    <th>Customer</th>
                                    <th>Product</th>
                                    <th>Price</th>
                                    <th>Stock</th>
                                    <th>Quantity</th>
                                    <th>Subtotal</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <input type="button" id="btnAddToList" value="Generate sale" class="btn btn-success">
                            <label for="" class="ml-auto mx-2 mt-1">Total:</label>
                            <input type="text" name="total_pay" id="total_pay" class="col-md-1 form-control" disabled>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

JavaScript 此功能使我可以将表格数据添加到表格中

function Add() {
    var item = 0;
    $('#btnAddToList').click(function () {
        item++;
        var customer_name = $('#customer_name').val();
        var producto_name = $('#producto_name').val();
        var product_price = $('#product_price').val();
        var product_stock = $('#product_stock').val();
        var product_quantity = $('#product_quantity').val();
        var Subtotal = product_price * product_quantity;

        var fila = '<tr><td>' + item + '</td><td>' + customer_name + '</td><td>' + producto_name + '</td><td>' + product_price + '</td><td>' + product_stock + '</td><td>' + product_quantity + '</td><td>' + Subtotal + '</td></tr>';
        var btn = document.createElement('tr');
        btn.innerHTML = fila;
        document.getElementById('dtProduct').appendChild(btn);

        //* ==========================================================
        // here get total to pay

       //
    });
}

按下按钮会将数据添加到表中，但我无法支付总金额。有谁能够帮助我？非常感谢你

Answer 1

这是一种无需修改太多代码的快速方法。我将if (isset($_POST['submit']))添加到您的小计td中。

class="td-subtotal"

然后在单击按钮后循环遍历in jquery。循环将添加到total变量，然后将其分配给total输入字段。

下面的代码在追加到表期间包含附加的td-subtotal类。

  <table id="dtProduct" class="table display border border-1" style="width: 100%;">
    <thead>
      <tr>
        <th>Code</th>
        <th>Customer</th>
        <th>Product</th>
        <th>Price</th>
        <th>Stock</th>
        <th>Quantity</th>
        <th>Subtotal</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td class="td-subtotal"></td>
      </tr>
    </tbody>
  </table>

Answer 2

在其他js函数中创建事件的习惯很糟糕。
您需要为小计td添加类。

尝试以下解决方案

var item = 0;
    $('#btnAddToList').click(function () {
        item++;
        var customer_name = $('#customer_name').val();
        var producto_name = $('#producto_name').val();
        var product_price = $('#product_price').val();
        var product_stock = $('#product_stock').val();
        var product_quantity = $('#product_quantity').val();
        var Subtotal = product_price * product_quantity;

        var fila = '<tr><td>' + item + '</td><td>' + customer_name + '</td><td>' + producto_name + '</td><td>' + product_price + '</td><td>' + product_stock + '</td><td>' + product_quantity + '</td><td class="subtotal">' + Subtotal + '</td></tr>';
        var btn = document.createElement('tr');
        btn.innerHTML = fila;
        document.getElementById('dtProduct').appendChild(btn);

        //* ==========================================================
        // here get total to pay

       //
       var total =0;
       $('.subtotal').each(function(index, tr) { 
        debugger
         total =total+  parseInt($(this).text());
});
$('#total_pay').val(total);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mt-5">
            <div class="col-md-4">
                <form role="form">
                    <div class="card">
                        <div class="card-header">
                            <h4>Customer information:</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="customer_name">Customer:</label>
                                    <input type="text" name="customer_name" id="customer_name" class="form-control">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="producto_name">Producto:</label>
                                    <input type="text" name="producto_name" id="producto_name" class="form-control">
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-md-4">
                                    <label for="product_price">Price</label>
                                    <input type="text" name="product_price" id="product_price" class="form-control">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="product_stock">Stock</label>
                                    <input type="text" name="product_stock" id="product_stock" class="form-control">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="product_quantity">quantity</label>
                                    <input type="number" name="product_quantity" id="product_quantity" value="1" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <input type="button" id="btnAddToList" value="Add to List" class="btn btn-primary" >
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-8">
                <form role="form">
                    <div class="card">
                        <div class="card-header">
                            <h5>Products:</h5>
                        </div>
                        <div class="card-body">
                            <table id="dtProduct" class="table display border border-1" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>Code</th>
                                        <th>Customer</th>
                                        <th>Product</th>
                                        <th>Price</th>
                                        <th>Stock</th>
                                        <th>Quantity</th>
                                        <th>Subtotal</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="card-footer">
                            <div class="row">
                                <input type="button" id="btnAddToList" value="Generate sale" class="btn btn-success" >
                                <label for="" class="ml-auto mx-2 mt-1">Total:</label>
                                <input type="text" name="total_pay" id="total_pay" class="col-md-1 form-control" disabled>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

Answer 3

如果不对不起，我将进行编辑，使其清晰易懂

const TD = $("<td></td>");
const TR = $("<tr></tr>");
const PRODUCTTABLE = $("#dtProduct");
const PRODUCTTOTAL = $("#AllPrice");

function Add() {
  var item = 0;
  $('#btnAddToList').click(function() {
    item++;
    var customer_name = $('#customer_name').val();
    var producto_name = $('#producto_name').val();
    var product_price = $('#product_price').val();
    var product_stock = $('#product_stock').val();
    var product_quantity = $('#product_quantity').val();
    var Subtotal = parseInt(product_price) * parseInt(product_quantity);



    let cCode = TD.clone().html(item);
    let cName = TD.clone().html(customer_name);
    let pName = TD.clone().html(producto_name);
    let pPrice = TD.clone().html(product_price);
    let pStock = TD.clone().html(product_stock);
    let pQuantity = TD.clone().html(product_quantity);
    let pTotalPrice = TD.clone().html(Subtotal).addClass("rowPrice");


    let newRow = TR.clone().append(
      item,
      cName,
      pName,
      pPrice,
      pStock,
      pQuantity,
      pTotalPrice,
    );


    //        loop through your rows to get your sum of prices
    let price = Subtotal; // get newly added sub total to tmp variable
    PRODUCTTABLE.find("tbody").children("tr").each(function() {
      let otherPrices = $(this).children(".rowPrice").text();
      price += parseInt((otherPrices.length > 0) ? price : 0); // using ternary if to prevent empty row
    });
    Subtotal = price; // at last give your price to subtotal


    PRODUCTTABLE.find("tbody").append(newRow); // add new row after calcule old prices

    PRODUCTTOTAL.find("#total_pay").val(Subtotal);
  });
}


Add();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mt-5">
  <div class="col-md-4">
    <form role="form">
      <div class="card">
        <div class="card-header">
          <h4>Customer information:</h4>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="form-group col-md-6">
              <label for="customer_name">Customer:</label>
              <input type="text" name="customer_name" id="customer_name" class="form-control">
            </div>
            <div class="form-group col-md-6">
              <label for="producto_name">Producto:</label>
              <input type="text" name="producto_name" id="producto_name" class="form-control">
            </div>
          </div>
          <div class="row">
            <div class="form-group col-md-4">
              <label for="product_price">Price</label>
              <input type="text" name="product_price" id="product_price" class="form-control">
            </div>
            <div class="form-group col-md-4">
              <label for="product_stock">Stock</label>
              <input type="text" name="product_stock" id="product_stock" class="form-control">
            </div>
            <div class="form-group col-md-4">
              <label for="product_quantity">quantity</label>
              <input type="number" name="product_quantity" id="product_quantity" value="1" class="form-control">
            </div>
          </div>
        </div>
        <div class="card-footer">
          <input type="button" id="btnAddToList" value="Add to List" class="btn btn-primary">
        </div>
      </div>
    </form>
  </div>
  <div class="col-md-8">
    <form role="form">
      <div class="card">
        <div class="card-header">
          <h5>Products:</h5>
        </div>
        <div class="card-body">
          <table id="dtProduct" class="table display border border-1" style="width: 100%;">
            <thead>
              <tr>
                <th>Code</th>
                <th>Customer</th>
                <th>Product</th>
                <th>Price</th>
                <th>Stock</th>
                <th>Quantity</th>
                <th>Subtotal</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="card-footer" id="AllPrice">
          <div class="row">
            <input type="button" value="Generate sale" class="btn btn-success">
            <label for="" class="ml-auto mx-2 ml-auto">Total:</label>
            <input type="text" name="total_pay" disabled id="total_pay" class="col-md-1 form-control" disabled>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

如何使用jquery计算表记录的总数？

3 个答案: