javascript - 如何从行总计中获取总计
问题描述
我是 javascript 新手。我有一张包含产品价格、数量、宽度和高度的表格。我在发票中有一行,并且有一个用于添加新行和删除行的按钮。我分别得到了每一行的总数。现在我想从所有产品的总计中获取总计。添加产品总计后,我想将此发票存储在数据库中。请给我一个更好的解决方案。提前致谢。问候
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
table,tr,td,th { border: 1px black solid;}
</style>
</head>
<body>
<table>
<thead>
<th>Price</th>
<th>Quantity</th>
<th>Width</th>
<th>Height</th>
<th>Total</th>
<th>Action</th>
</thead>
<tbody id="product_table">
<tr>
<td><input type="text" name="price"></td>
<td><input type="text" name="quantity"></td>
<td><input type="text" name="width"></td>
<td><input type="text" name="height"></td>
<td><input type="text" name="total" readonly></td>
<td><input type="button" value="X" onclick="deleteRow(this)"/></td>
</tr>
</tbody>
<input type="button" name="submit" value="Add Row" onclick="add_fields();">
</table>
<span>Grand Total<input type="text" name="grandtotal" readonly></span>
</body>
<script>
const table = document.getElementById('product_table');
table.addEventListener('input', ({ target }) => {
const tr = target.closest('tr');
const [price, quantity, width, height, total] = tr.querySelectorAll('input');
var size = width.value * height.value;
var rate = price.value * quantity.value;
if (size != "") {
total.value = size * rate;
}else{
total.value = rate;
}
});
function add_fields() {
var row = document.createElement("tr");
row.innerHTML =
'<td><input type="text" name="price"></td>' +
'<td><input type="text" name="quantity"></td>' +
'<td><input type="text" name="width"></td>' +
'<td><input type="text" name="height"></td>' +
'<td><input type="text" name="total" readonly></td>' +
'<td><input type="button" value="X" onclick="deleteRow(this)"/></td>';
table.appendChild(row);
}
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
</html>
解决方案
这是您的工作代码。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js</script>
<style>
table,tr,td,th { border: 1px black solid;}
</style>
</head>
<body>
<table>
<thead>
<th>Price</th>
<th>Quantity</th>
<th>Width</th>
<th>Height</th>
<th>Total</th>
<th>Action</th>
</thead>
<tbody id="product_table">
<tr>
<td><input type="text" name="price"></td>
<td><input type="text" name="quantity"></td>
<td><input type="text" name="width"></td>
<td><input type="text" name="height"></td>
<td><input type="text" name="total" class="totalPrice" readonly></td>
<td><input type="button" value="X" onclick="deleteRow(this)"/></td>
</tr>
</tbody>
<input type="button" name="submit" value="Add Row" onclick="add_fields();">
</table>
<span>Grand Total<input type="text" name="grandtotal" id="grandtotal" readonly></span>
</body>
<script>
const table = document.getElementById('product_table');
table.addEventListener('input', ({ target }) => {
const tr = target.closest('tr');
const [price, quantity, width, height, total] = tr.querySelectorAll('input');
var size = width.value * height.value;
var rate = price.value * quantity.value;
if (size != "") {
total.value = size * rate;
}else{
total.value = rate;
}
totalPrice();
});
function add_fields() {
var row = document.createElement("tr");
row.innerHTML =
'<td><input type="text" name="price"></td>' +
'<td><input type="text" name="quantity"></td>' +
'<td><input type="text" name="width"></td>' +
'<td><input type="text" name="height"></td>' +
'<td><input type="text" name="total" class="totalPrice" readonly></td>' +
'<td><input type="button" value="X" onclick="deleteRow(this)"/></td>';
table.appendChild(row);
}
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
totalPrice();
}
function totalPrice(){
var sum = 0;
$(".totalPrice").each(function(){
sum += parseFloat($(this).val());
});
$("#grandtotal").val(sum);
}
</script>
</html>
希望它对你有用。
推荐阅读
- node.js - 如何更新 ref 文档中的数据?
- python - 如何访问 pyspark 数据框中的结构元素?
- wpf - 如何在 prism InvokeCommandAction 中使用 EventArgsConverter?
- python - 使用 re.split 获取 JSON 列表
- flutter - W/颤振(22164):onAdFailedToLoad:0
- android - 无法打开资产 URL:file:///android_asset/error.html
- .htaccess - .htaccess 中的密码保护不要求输入密码
- r - 对于 R Lavaan 用户:您如何克服不正常的变量?
- python-3.x - 如何使用 Python 模块 Subprocess 发送密码?
- vba - VBA 刷新表单