javascript函数动态地将表中的值和列相乘

Question

我有一个简单的html表，用户在每行输入两个值。当他们输入数据时，我需要表自动将每行中的两个值相乘，并在行尾生成值。同时，它应该在表的底部给出一个运行总数。

我已经得到了函数乘法值，因为他们进入，但我的总数始终保持零。我在某个地方做错了，只是我再也看不到了。

你能帮忙吗?

function add_to_total(el) {
var parent = $(el).closest('tr');
var price = parent.find('.price').val() == "" ? 1 : parent.find('.price').val();
var qty = parent.find('.qty').val() == "" ? 1 : parent.find('.qty').val();
var total = price * qty;
var total = total.toFixed(2);
parent.find('.total_price').val(total);
var gtot = 0;
$("#quantum tr > tbody td:nth-child(3)").each(
(_, el) => gtot += Number($(el).text()) || 0
);
$("#sum1").text(gtot);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="quantum" class="table table-bordered table-striped dataTable " role="grid">
<thead>
<tr>
<th>Item</th>
<th>Value</th>
<th>Multiplier</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<th>Past Losses</th>
</tr>
<tr>
<td>Earnings</td>
<td>
<input type="number" class="pr price" name="" pr_id="" value="" onchange="add_to_total(this)" style="width: 200px; height: 26px">
</td>
<td>
<input type="number" class="pr qty" name="" value="" onchange="add_to_total(this)" style="width: 100px; height: 26px">
</td>
<td>
<input type="number" name="" class="pr total_price" style="width: 200px; height: 26px">
</td>
</tr>
<tr>
<td>Pension</td>
<td>
<input type="number" class="pr price" name="" pr_id="" value="" onchange="add_to_total(this)" style="width: 200px; height: 26px">
</td>
<td>
<input type="number" class="pr qty" name="" value="" onchange="add_to_total(this)" style="width: 100px; height: 26px">
</td>
<td>
<input type="number" name="" class="pr total_price" style="width: 200px; height: 26px">
</td>
</tr>
<tr>
<td>Care</td>
<td>
<input type="number" class="pr price" name="" pr_id="" value="" onchange="add_to_total(this)" style="width: 200px; height: 26px"> </td>
<td>
<input type="number" class="pr qty" name="" value="" onchange="add_to_total(this)" style="width: 100px; height: 26px">
</td>
<td>
<input type="number" name="" class="pr total_price" style="width: 200px; height: 26px">
</td>
</tr>

</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th>Total Damages</th>
<th id="sum1" type="number"></th>
</tr>
</tfoot>
</table>

Answer 1

您不能使用.text()来获取输入的值。

遍历.total_price元素并添加它们的值。

function add_to_total(el) {
var parent = $(el).closest('tr');
var price = parent.find('.price').val() == "" ? 1 : parent.find('.price').val();
var qty = parent.find('.qty').val() == "" ? 1 : parent.find('.qty').val();
var total = price * qty;
var total = total.toFixed(2);
parent.find('.total_price').val(total);
var gtot = 0;
$(".total_price").each(
(_, el) => gtot += Number(el.value) || 0
);
$("#sum1").text(gtot);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="quantum" class="table table-bordered table-striped dataTable " role="grid">
<thead>
<tr>
<th>Item</th>
<th>Value</th>
<th>Multiplier</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<th>Past Losses</th>
</tr>
<tr>
<td>Earnings</td>
<td>
<input type="number" class="pr price" name="" pr_id="" value="" onchange="add_to_total(this)" style="width: 200px; height: 26px">
</td>
<td>
<input type="number" class="pr qty" name="" value="" onchange="add_to_total(this)" style="width: 100px; height: 26px">
</td>
<td>
<input type="number" name="" class="pr total_price" style="width: 200px; height: 26px">
</td>
</tr>
<tr>
<td>Pension</td>
<td>
<input type="number" class="pr price" name="" pr_id="" value="" onchange="add_to_total(this)" style="width: 200px; height: 26px">
</td>
<td>
<input type="number" class="pr qty" name="" value="" onchange="add_to_total(this)" style="width: 100px; height: 26px">
</td>
<td>
<input type="number" name="" class="pr total_price" style="width: 200px; height: 26px">
</td>
</tr>
<tr>
<td>Care</td>
<td>
<input type="number" class="pr price" name="" pr_id="" value="" onchange="add_to_total(this)" style="width: 200px; height: 26px"> </td>
<td>
<input type="number" class="pr qty" name="" value="" onchange="add_to_total(this)" style="width: 100px; height: 26px">
</td>
<td>
<input type="number" name="" class="pr total_price" style="width: 200px; height: 26px">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th>Total Damages</th>
<th id="sum1" type="number"></th>
</tr>
</tfoot>
</table>