我想通过将各行的输入相乘来计算每一行的总价,然后通过使用JQuery添加Total列的所有总值来计算总计。当我输入值时,我只获得显示总计的第一行。任何帮助将不胜感激。
<script type="text/C#" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".txtMult").each(function () {
$(this).keyup(function () {
multInputs();
});
});
});
function multInputs() {
var mult = 0;
$(".txtMult").each(function () {
var $val1 = $('#val1').val();
var $val2 = $('#val2').val();
var $total = ($val1 * 1) * ($val2 * 1)
$('#multTotal').text($total);
});
}
</script>
@using (@Html.BeginForm())
{
<table>
<tr>
<th>
Quanity
</th>
<th>
Unit Price
</th>
<th>
Total
</th>
</tr>
@for (int i=0; i < 5; i++)
{
<tr>
<td>
<input class ="txtMult" name="txtEmmail" id="val1" />
</td>
<td>
<input class ="txtMult" name="txtEmmail" id="val2"/>
</td>
<td>
<span id="multTotal">0.00</span>
</td>
</tr>
}
<tr>
<td colspan="3" align="right">
Grand Total# <span id="grandTotal">0.00</span>
</td>
</tr>
</table>
}
答案 0 :(得分:8)
您的HTML无效:id
属性应该是唯一的,但您在每一行中重复相同的三个ID。解决此问题的最简单方法是将输入更改为class="val1"
和class="val2"
而不是id="val1"
和`id="val2"
,并将行总数更改为class="multTotal"
。我还将txtMult
类移动到每个带有输入的tr元素中,以便于选择这些行:
<tr class="txtMult">
<td>
<input name="txtEmmail" class="val1" />
</td>
<td>
<input name="txtEmmail" class="val2"/>
</td>
<td>
<span class="multTotal">0.00</span>
</td>
</tr>
...然后更改jQuery代码中的选择器,以便在当前行的上下文中按类进行选择。另请注意,您不需要使用.each()
循环将.keyup()
处理程序绑定到与您的选择器匹配的元素,只需使用$("someselector").keyup()
:
$(document).ready(function () {
$(".txtMult input").keyup(multInputs);
function multInputs() {
var mult = 0;
// for each row:
$("tr.txtMult").each(function () {
// get the values from this row:
var $val1 = $('.val1', this).val();
var $val2 = $('.val2', this).val();
var $total = ($val1 * 1) * ($val2 * 1);
// set total for the row
$('.multTotal', this).text($total);
mult += $total;
});
$("#grandTotal").text(mult);
}
});
答案 1 :(得分:1)
让我们在表格中添加一个班级in
。
首先将更改事件添加到表的所有输入中。在更改输入字段时,将相同行的所有输入相乘并更新multTotal
和grandTotal
$(function(){
$('.in input').change(function(){
var p=$(this).parent().parent() //get the parent of changed input
var m=p.find('input.txtMult') //find all input of the row
var mul=parseFloat($(m[0]).val()*$(m[1]).val()).toFixed(2) //multiply them
var res=p.find('.multTotal') // get corresponding multTotal
res.html(mul); //show the result
var total=0;
$('.in .multTotal').each(function(){
total+=parseFloat($(this).html())
}) //calculate grand total
$('.in #grandTotal').html(parseFloat(total).toFixed(2)) //show grand total
});
})
上查看
如果需要处理超过2个字段的更改
var mul=parseFloat($(m[0]).val()*$(m[1]).val()).toFixed(2) //multiply them
到
var mul=1;
$(m).each(function(){
mul*=$(this).val()
})
mul=parseFloat(mul).toFixed(2)