juery每行单价、数量、金额的计算

最新推荐文章于 2022-11-04 14:43:52 发布

原创最新推荐文章于 2022-11-04 14:43:52 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

4 篇文章

订阅专栏

这段代码展示了如何使用jQuery监听输入框的焦点丢失和键盘按键事件，实时计算表格中每一行的单价、数量和总价，并在数量或单价改变时更新金额。同时，还提供了一个名为`fun`的函数来计算所有行的总金额。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

$('.number').die().live('focusout',function(){

$(this).parent().next().children().val('22');
$(this).parent().next().next().children().val('33');
$(this).parent().next().next().next().children().val('44');

});
//修改数量时，计算金额
$('.shuliang').die().live('keyup',function(){
var shuliang = parseFloat($(this).val()).toFixed(2);
var danjia = parseFloat($(this).parent().next().children().val()).toFixed(4);
var jine = (danjia*shuliang).toFixed(4);
$(this).parent().next().next().children().val(jine)
fun();
});

//修改单价时，计算金额
$('.danjia').die().live('keyup',function(){
var danjia = parseFloat($(this).val()).toFixed(4);
var shuliang = parseFloat($(this).parent().prev().children().val()).toFixed(2);//数量
var jine = (danjia*shuliang).toFixed(4);
$(this).parent().next().children().val(jine);
fun();

});
//计算所有分录的总金额
function fun(){
var temp = 0;
// var id = parseInt($(this).attr('id'));
$("input[id='totaljine']").each(function(){
//alert(id);

temp+= parseFloat($(this).val());
// alert($(this).val());
})
$(".totalMoney").val(temp);

}

//计算所有分录的折扣金额

//计算所有分录的实收金额

});

</script>
</head>

<body>


<table>
<tr><td width='6%'><input type=text class='totalMoney' id='1' size='7' name="" /></td></tr>
<tr class='biaoti' style="font-size:15px;" bgcolor="#38B0DE ">
<td width="5%" >物料编码</td>
<td width="7%" >物料名称</td>
<td width="7%" >规格型号</td>
<td width="7%" >计量单位</td>
<td width="5%" >数量</td>
<td width="10%">单位实际成本</td>
<td width="6%">实际成本</td>
<td width="5%">折扣金额</td>
<td width="5%">实收金额</td>
<td width="6%" >仓库</td>
<td width="6%" >备注</td>

<td width="6%">操作</td>
</tr>
<tr class='info'>
<td width='6%'><input type=text class='number' id='1' size='7' name="qtckentry.wlnumber" /></td>
<td width='6%'><input type=text class='item' id='2' size='7' name="qtckentry.wlname" /> </td>
<td width='6%'><input type=text class='item' id='3' size='7' name="qtckentry.ggxh" /></td>
<td width='6%'><input type=text class='item' id='4' size='7' name="qtckentry.jldanwei"/></td>

<td width='7%'><input type=text class='shuliang' id='5' size='8' name="qtckentry.shuliang" value='0'/></td>
<td width='7%'><input type=text class='danjia' id='8' size='8' name="qtckentry.dwsjcb" value='0'/></td>
<td width='6%'><input type=text class='jine' id='totaljine' size='8' name="qtckentry.sjcb" value='0'/></td>

<td width='6%'><input type=text class='item' id='10' size='8' name="qtckentry.hsdanjia"/></td>
<td width='6%'><input type=text class='item' id='11' size='8' name="qtckentry.bwdjine"/></td>
<td width='7%'><input type=text class='item' id='6' size='8' name="qtckentry.cangku" value='0'/></td>
<td width='7%'><input type=text class='item' id='7' size='8' name="qtckentry.beizhu"/></td>
<td><span id='delRow'>删除此行</span></td>
</tr>

<tr class='info'>
<td width='6%'><input type=text class='number' id='1' size='7' name="qtckentry.wlnumber" /></td>
<td width='6%'><input type=text class='item' id='2' size='7' name="qtckentry.wlname" /> </td>
<td width='6%'><input type=text class='item' id='3' size='7' name="qtckentry.ggxh" /></td>
<td width='6%'><input type=text class='item' id='4' size='7' name="qtckentry.jldanwei"/></td>

<td width='7%'><input type=text class='shuliang' id='5' size='8' name="qtckentry.shuliang" value='0'/></td>
<td width='7%'><input type=text class='danjia' id='8' size='8' name="qtckentry.dwsjcb" value='0'/></td>
<td width='6%'><input type=text class='jine' id='totaljine' size='8' name="qtckentry.sjcb" value='0'/></td>

<td width='7%'><input type=text class='item' id='6' size='8' name="qtckentry.cangku" value='0'/></td>
<td width='7%'><input type=text class='item' id='7' size='8' name="qtckentry.beizhu"/></td>
<td width='6%'><input type=text class='item' id='10' size='8' name="qtckentry.hsdanjia"/></td>
<td width='6%'><input type=text class='item' id='11' size='8' name="qtckentry.bwdjine"/></td>
<td><span id='delRow'>删除此行</span></td>
</tr>

</table>

</body>
</html>