首页猿问如何使用 jquery...

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

JavaScript

噜噜哒 2022-01-07 19:09:54

我需要使用 jquery 计算表中找到的所有记录的总支付额这里我向您展示表单 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>按下按钮将数据添加到表中，但我无法支付总额。有谁能够帮我？非常感谢你

查看完整描述

3 回答

ibeautiful

TA贡献1993条经验获得超5个赞

在其他 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);

});

<h4>Customer information:</h4>

</div>

<label for="customer_name">Customer:</label>

</div>

<label for="producto_name">Producto:</label>

</div>

<label for="product_price">Price</label>

</div>

<label for="product_stock">Stock</label>

</div>

<label for="product_quantity">quantity</label>

</div>

</div>

</form>

</div>

<h5>Products:</h5>

</div>

<thead>

<tr>

<th>Customer</th>

<th>Product</th>

<th>Price</th>

<th>Stock</th>

<th>Quantity</th>

<th>Subtotal</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

</div>

<label for="" class="ml-auto mx-2 mt-1">Total:</label>

</div>

</form>

</div>

反对回复 2022-01-07

神不在的星期二

TA贡献1963条经验获得超6个赞

尽量清晰易懂，如果不抱歉，我会编辑

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();

<h4>Customer information:</h4>

</div>

<label for="customer_name">Customer:</label>

</div>

<label for="producto_name">Producto:</label>

</div>

<label for="product_price">Price</label>

</div>

<label for="product_stock">Stock</label>

</div>

<label for="product_quantity">quantity</label>

</div>

</div>

</form>

</div>

<h5>Products:</h5>

</div>

<thead>

<tr>

<th>Customer</th>

<th>Product</th>

<th>Price</th>

<th>Stock</th>

<th>Quantity</th>

<th>Subtotal</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

</div>

<label for="" class="ml-auto mx-2 ml-auto">Total:</label>

</div>

</form>

</div>

反对回复 2022-01-07

烙印99

TA贡献1829条经验获得超13个赞

这是一种无需修改太多代码的快速方法。向小计 td 添加一个类，我添加了class="td-subtotal".

<thead>

<tr>

<th>Customer</th>

<th>Product</th>

<th>Price</th>

<th>Stock</th>

<th>Quantity</th>

<th>Subtotal</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

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

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

$('#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 btn = document.createElement('tr');

btn.innerHTML = fila;

document.getElementById('dtProduct').appendChild(btn);

// initialize

var total = 0;

// loop

$(".td-subtotal").each(function(){

// get value

total+=$(this).html();

});

// assign

$("#total_pay").val(total);

});

反对回复 2022-01-07

3 回答
0 关注
283 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

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

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

3 回答

添加回答