javascript - 计算表列中的总价格，可以手动插入

Question

我正在寻求简单解决问题的帮助。需要计算表中所有现有值的总价。通过单击表格底部的“添加产品价格”来添加。

简单的 JavaScript 和 Jquery

$("form#addProduct").submit(function() {
    var product = {};
    var nameInput = $('input[name="name"]').val().trim();
    var priceInput = $('input[name="price"]').val().trim();
    if (nameInput && priceInput ) {
        $(this).serializeArray().map(function(data) {
            product[data.name] = data.value;
        });
        var lastProduct = products[Object.keys(products).sort().pop()];
        product.id = lastProduct.id + 1;

        addProduct(product);
    } else {
        alert("All fields must have a valid value.");
    }
});

完整代码在CodePen链接中 https://codepen.io/ajdos-zhubandyk/pen/pozQzNd

总成本为120

Answer 1

我已经为您的代码检查添加了位代码，只需添加函数来计算该代码的总和...如果您对该代码有任何疑问，请告诉我。

var products = [
    {
        id: 1,
        name: "Apple",
        price: 70,

    },
    {
        id: 2,
        name: "Lemon",
        price: 50,

    }
];


$.each(products, function(i, product) {
    appendToProductTable(product);
});

$("form").submit(function(e) {
    e.preventDefault();
});
calTotal();
function calTotal(){
  var count=0;
  $('#productTable tr').each(function(){
    if(($(this).find('td').length) > 0){
      count = count + parseInt($(this).find('td:last-child').html());
    }
  });       
  $('#Tprice').html(count);
  }
                     
$("form#addProduct").submit(function() {
    var product = {};
    var nameInput = $('input[name="name"]').val().trim();
    var priceInput = $('input[name="price"]').val().trim();
    if (nameInput && priceInput ) {
        $(this).serializeArray().map(function(data) {
            product[data.name] = data.value;
        });
        var lastProduct = products[Object.keys(products).sort().pop()];
        product.id = lastProduct.id + 1;

        addProduct(product);
    } else {
        alert("All fields must have a valid value.");
    }
  
  calTotal();
});

function addProduct(product) {
    products.push(product);
    appendToProductTable(product);
}
function appendToProductTable(product) {
    $("#productTable > tbody:last-child").append(`
        <tr id="product-${product.id}">
            <td class="productData" name="name">${product.name}</td>
            '<td class="productData" name="price">${product.price}</td>            
            
        </tr>     
        <tr></tr>   
    `);

}

body, html {
    font-size: 16px;
}
.container{
    max-width: 1170px !important; ;}

.main-title h1{
    margin: 1em 0;
}
.table {
    width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.05);
}
.table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #0062cc;
    border-color: #005cbf;
}

<link rel="stylesheet" id="cf_styles-css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" type="text/css" media="screen,projection" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="main-title">
                    <h1>Please add the Product</h1>
                </div>
            </div>
            <div class="col-sm-4">
                <form id="addProduct" action="">
                    <div class="form-group">
                        <input class="form-control" type="text" name="name" placeholder="Name" required>
                    </div>
                    <div class="form-group">
                        <input class="form-control" type="number" name="price" min="0" placeholder="Price" required>
                    </div>
                    <button class="btn btn-primary form-control" type="submit">SUBMIT</button>
                </form>
            </div>
            <div class="col-sm-12">
                <div class="main-title">
                    <h1>Products</h1>
                </div>
                <table id="productTable" class="table table-striped">
                    <tr>
                        <th>Name</th>
                        <th>Price.tg</th>
                    </tr>
                </table>
                <table id="TotalPrice" class="table table-striped">
                    <tr>
                        <td>Total</td>
                        <td  id="Tprice"></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>