我需要在jquery中使用Calculation构建一个html页面。这应该自动出现在下面。
数量x价格=金额（自动） 总金额（自动） 总金额 - 折扣（手动）=净金额
请找到下面的html代码，让我知道最简单的方法。 {{3}}
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>Item Name</td>
<td>Qty</td>
<td>Price(Per/Kg)</td>
<td>Amount</td>
</tr>
<tr>
<td>Test Item 1</td>
<td><input name="input" type="text" onChange="" /></td>
<td><input name="input" type="text" /></td>
<td><input name="input" type="text" /></td>
</tr>
</tbody>
</table>
<p> </p>
<table width="300" border="0">
<tr>
<td width="100"><strong>Total Amount</strong></td>
<td> </td>
</tr>
<tr>
<td><strong>Discount</strong></td>
<td> </td>
</tr>
<tr>
<td><strong>Net Amount</strong></td>
<td> </td>
</tr>
</table>
答案 0 :(得分：1)
您需要提供字段 ID。 我们将以下ID用于演示目的。
<input type="text" name="demoOne" id="demoOne">
<input type="text" name="demoTwo" id="demoTwo">
<input type="text" name="demoResult" id="demoResult">
对于jQuery，我们可以使用非常基本的东西，如下所示 我们创建2个变量来获取字段的值，并简单地给结果字段计算那些 fiels 的计算结果。
<script>
$('#demoTwo #demoOne').keyup(function(){
var demoOne;
var demoTwo;
demoOne = parseFloat($('#demoOne').val());
demoTwo = parseFloat($('#demoTwo').val());
var demoResult = demoOne + demoTwo;
$('#demoResult').val(demoResult.toFixed(2));
});
</script>
答案 1 :(得分：1)
$('#items-table').on('input', '.qty input, .price input', function() {
var row = $(this).parents('tr');
var qty = row.find('.qty input').val();
var price = row.find('.price input').val();
row.find('.amt').text(qty * price);
var rows = $(this).parents('table').find('tr:not(:first-child)');
var total_amt = 0;
rows.each(function() {
var amt = $(this).find('.amt').text() || 0;
total_amt += parseFloat(amt)
})
var calc_table = $('#total-calc');
var discount = calc_table.find('.discount input').val() || 0;
var net_amt = total_amt - discount;
calc_table.find('.total-amt').text(total_amt);
calc_table.find('.net-amt').text(net_amt);
})
$('#total-calc .discount input').on('input', function(){
var calc_table = $('#total-calc');
var total_amt = calc_table.find('.total-amt').text() || 0;
var discount = $(this).val() || 0;
var net_amt = total_amt - discount;
calc_table.find('.net-amt').text(net_amt);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="items-table" width="300" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>Item Name</td>
<td>Qty</td>
<td>Price(Per/Kg)</td>
<td>Amount</td>
</tr>
<tr>
<td>Test Item 1</td>
<td class="qty"><input name="input" type="text" onChange="" /></td>
<td class="price"><input name="input" type="text" /></td>
<td class="amt"><input name="input" type="text" /></td>
</tr>
</tbody>
</table>
<p> </p>
<table id="total-calc" width="300" border="0">
<tr>
<td width="100"><strong>Total Amount</strong></td>
<td class="total-amt"> </td>
</tr>
<tr>
<td><strong>Discount</strong></td>
<td class="discount"><input name="input" type="text" /></td>
</tr>
<tr>
<td><strong>Net Amount</strong></td>
<td class="net-amt"> </td>
</tr>
</table>
答案 2 :(得分：1)
多行的通用解决方案。
jQuery的：
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>Item Name</td>
<td>Qty</td>
<td>Price(Per/Kg)</td>
<td>Amount</td>
</tr>
<tr class="amount-row">
<td>Test Item 1</td>
<td><input class="quantity" name="input" type="text" /></td>
<td><input class="price" name="input" type="text" /></td>
<td><input class="amount" name="input" type="text" /></td>
</tr>
<tr class="amount-row">
<td>Test Item 2</td>
<td><input class="quantity" name="input" type="text" /></td>
<td><input class="price" name="input" type="text" /></td>
<td><input class="amount" name="input" type="text" /></td>
</tr>
</tbody>
</table>
<p> </p>
<table width="300" border="0">
<tr>
<td width="100"><strong>Total Amount</strong></td>
<td id="total-amount"> </td>
</tr>
<tr>
<td><strong>Discount</strong></td>
<td><input type="text" id="discount"></td>
</tr>
<tr>
<td><strong>Net Amount</strong></td>
<td id="net-amount"> </td>
</tr>
</table>
HTML：
start请在这里找到工作小提琴：https://jsfiddle.net/9egno7ge/3/
答案 3 :(得分：1)
使用此功能。我不知道你怎么算discount。你可以在我的代码中添加一点点来添加它。
function calculateTotal() {
// --------------------
$("#target tr").each(function() {
if ($(this).children("td").length) {
$($($(this).children("td")[3]).children("input")[0]).val(
(($($($(this).children("td")[2]).children("input")[0]).val()) ? Number($($($(this).children("td")[2]).children("input")[0]).val()) : 0) *
(($($($(this).children("td")[1]).children("input")[0]).val()) ? Number($($($(this).children("td")[1]).children("input")[0]).val()) : 0)
)
}
});
// --------------------
var totalAm = 0;
$("input[name='amount']").each(function() {
totalAm += $(this).val() ? Number($(this).val()) : 0;
});
$("td[name='t_am']").text(totalAm);
// --------------------
var discount = $("input[name='discount']").val() ? Number($("input[name='discount']").val()) : 0;
$("td[name='tn_am']").text($("td[name='t_am']").text() - discount);
}
$("input").on('change', function() {
calculateTotal();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="asdf" width="40%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>Client Code:</td>
<td><input name="" type="text" /></td>
<td align="right">Client Name:</td>
<td><input type="text" name="fname"></td>
</tr>
<tr>
<td>Address:</td>
<td><input name="" type="text" /></td>
<td align="right">LPO No:</td>
<td><input name="" type="text" /></td>
</tr>
</table>
<table id="target" width="300" border="0">
<tbody>
<tr>
<td>Item Name</td>
<td>Qty</td>
<td>Price(Per/Kg)</td>
<td>Amount</td>
</tr>
<tr>
<td>Test Item 1</td>
<td><input name="qty" type="text" /></td>
<td><input name="price" type="text" /></td>
<td><input name="amount" disabled type="text" /></td>
</tr>
</tbody>
</table>
<p> </p>
<table width="300" border="0">
<tr>
<td width="100"><strong>Total Amount</strong></td>
<td name="t_am"> </td>
</tr>
<tr>
<td><strong>Discount</strong></td>
<td><input type="number" name="discount" id="discount"></input>
</td>
</tr>
<tr>
<td><strong>Net Amount</strong></td>
<td name="tn_am"> </td>
</tr>
</table>