87,902
社区成员
发帖
与我相关
我的任务
分享请高手帮忙改个金额计算的JS效果 （里面样式JS基础代码都已经写好）
<!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 type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
//增加 删除一行
var i = 0;
$("#btn_zj").live("click",function(){
i +=1;
$('#hj').before('<tr><td><input type="text" name="info['+i+'][assets_num]" onkeyup="caigou_num(this)" maxlength="4">+</td><td><input type="text" name="info['+i+'][assets_price]" onkeyup="caigou_num(this)" maxlength="8"></td><td><a class="del" href="javascript:" title="删除">删除</a></td></tr>');
delTr();
})
function delTr(){
$(".del").click(function(){
$(this).parent().parent().remove();
})
}
</script>
<style type="text/css">
.sshstyle,.sshstyle td{ border:1px solid #ccc;}
.sshstyle td{ border-right:1px solid #ccc}
</style>
</head>
<body>
<p>主要问题是：
<span style="color:red">实现当点击 在属于当输入数量的时候总金额会显示 在输入单价的时候就会（单价*数量=总金额）计算结果<br />
而当 有多个的话 我可以选择 增加一行 后 在次输入其它tr里面的文本框的时候 也是要求累计计入总价里面去的 依次类推<br />
当然 在点击删除按钮的时候当前那一行的移除后 总金额也会发生变化 <br />
请高手帮忙写一下~ </span>
</p>
<!--以下是金额1 和2-->
<table cellpadding="0" cellspacing="0" border="0" class="sshstyle">
<tr>
<td style="text-align:center">数量</td>
<td style="text-align:center">单价</td>
<td>操作</td>
</tr>
<tr>
<td><input type="text" name="info[0][assets_num]" onkeyup="caigou_num(this)" maxlength="4">+</td>
<td><input type="text" name="info[0][assets_price]" onkeyup="caigou_num(this)" maxlength="8"></td>
<td><a class="del" href="javascript:" title="删除">删除</a></td>
</tr>
<tr id="hj">
<!--总金额-->
<td colspan="2">总金额：<input type="text" class="zongjine" disabled="disabled" value="" id="count"></td>
</tr>
<tr>
<td><a href="javascript:" id="btn_zj" class="btn_an"><span></span><i class="btn_lzengjia" ></i>增加一行</a> </td>
</tr>
</table>
</body>
</html>
...全文
请发表友善的回复…
发表回复
Go 旅城通票 2014-04-09
- 打赏
- 举报
数量那个输入框传递参数，加个的不传递，注意
<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function caigou_num(o) {
var rx = /^\d+(\.\d+)?$/;
if (o && rx.test(o.value)) o.value = parseInt(o.value, 10);//转为数字
var sum = 0, input;
$('#tb tr:gt(0)').each(function () {
input = $(':input', this);
if (rx.test(input.eq(0).val()) && rx.test(input.eq(1).val())) sum += parseFloat(input.eq(0).val()) * parseFloat(input.eq(1).val());
});
$('#count').val(sum);
}
$(document).ready(function () {
//增加 删除一行
var i = 0;
$("#btn_zj").click(function () {
i += 1;
$('#hj').before('<tr><td><input type="text" name="info[' + i + '][assets_num]" onkeyup="caigou_num(this)" maxlength="4">+</td><td><input type="text" name="info[' + i + '][assets_price]" onkeyup="caigou_num()" maxlength="8"></td><td><a class="del" href="javascript:" title="删除">删除</a></td></tr>').prev().find('.del').click(delTr);
})
function delTr() {
$(this).parent().parent().remove();
caigou_num();
}
});
</script>
<style type="text/css">
.sshstyle,.sshstyle td{ border:1px solid #ccc;}
.sshstyle td{ border-right:1px solid #ccc}
</style>
</head>
<body>
<p>主要问题是：
<span style="color:red">实现当点击 在属于当输入数量的时候总金额会显示 在输入单价的时候就会（单价*数量=总金额）计算结果<br />
而当 有多个的话 我可以选择 增加一行 后 在次输入其它tr里面的文本框的时候 也是要求累计计入总价里面去的 依次类推<br />
当然 在点击删除按钮的时候当前那一行的移除后 总金额也会发生变化 <br />
请高手帮忙写一下~ </span>
</p>
<!--以下是金额1 和2-->
<table cellpadding="0" cellspacing="0" border="0" class="sshstyle" id="tb">
<tr>
<td style="text-align:center">数量</td>
<td style="text-align:center">单价</td>
<td>操作</td>
</tr>
<tr>
<td><input type="text" name="info[0][assets_num]" onkeyup="caigou_num(this)" maxlength="4">+</td>
<td><input type="text" name="info[0][assets_price]" onkeyup="caigou_num()" maxlength="8"></td>
<td><a class="del" href="javascript:" title="删除">删除</a></td>
</tr>
<tr id="hj">
<!--总金额-->
<td colspan="2">总金额：<input type="text" class="zongjine" disabled="disabled" value="" id="count"></td>
</tr>
<tr>
<td><a href="javascript:" id="btn_zj" class="btn_an"><span></span><i class="btn_lzengjia" ></i>增加一行</a> </td>
</tr>
</table>
</body>
</html>
人生得一知己 2014-04-08
- 打赏
- 举报
你好，你这个好像不行哦 累加有问题[/quote]
不好意思 是我复制错了···· 不过还有点问题 就是 当我 增加一行 的时候 当 价格填写 而 数量不填写 或者 为0的时候是不进行累加的···为什么那？？
人生得一知己 2014-04-08
- 打赏
- 举报
你好，你这个好像不行哦 累加有问题
Go 旅城通票 2014-04-08
- 打赏
- 举报
<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function caigou_num() {
var sum = 0, rx = /^\d+(\.\d+)?$/,input;
$('#tb tr:gt(0)').each(function () {
input = $(':input', this);
if (rx.test(input.eq(0).val()) && rx.test(input.eq(1).val())) sum += parseFloat(input.eq(0).val()) * parseFloat(input.eq(1).val());
});
$('#count').val(sum);
}
$(document).ready(function () {
//增加 删除一行
var i = 0;
$("#btn_zj").click(function () {
i += 1;
$('#hj').before('<tr><td><input type="text" name="info[' + i + '][assets_num]" onkeyup="caigou_num()" maxlength="4">+</td><td><input type="text" name="info[' + i + '][assets_price]" onkeyup="caigou_num()" maxlength="8"></td><td><a class="del" href="javascript:" title="删除">删除</a></td></tr>').prev().find('.del').click(delTr);
})
function delTr() {
$(this).parent().parent().remove();
caigou_num();
}
});
</script>
<style type="text/css">
.sshstyle,.sshstyle td{ border:1px solid #ccc;}
.sshstyle td{ border-right:1px solid #ccc}
</style>
</head>
<body>
<p>主要问题是：
<span style="color:red">实现当点击 在属于当输入数量的时候总金额会显示 在输入单价的时候就会（单价*数量=总金额）计算结果<br />
而当 有多个的话 我可以选择 增加一行 后 在次输入其它tr里面的文本框的时候 也是要求累计计入总价里面去的 依次类推<br />
当然 在点击删除按钮的时候当前那一行的移除后 总金额也会发生变化 <br />
请高手帮忙写一下~ </span>
</p>
<!--以下是金额1 和2-->
<table cellpadding="0" cellspacing="0" border="0" class="sshstyle" id="tb">
<tr>
<td style="text-align:center">数量</td>
<td style="text-align:center">单价</td>
<td>操作</td>
</tr>
<tr>
<td><input type="text" name="info[0][assets_num]" onkeyup="caigou_num(this)" maxlength="4">+</td>
<td><input type="text" name="info[0][assets_price]" onkeyup="caigou_num(this)" maxlength="8"></td>
<td><a class="del" href="javascript:" title="删除">删除</a></td>
</tr>
<tr id="hj">
<!--总金额-->
<td colspan="2">总金额：<input type="text" class="zongjine" disabled="disabled" value="" id="count"></td>
</tr>
<tr>
<td><a href="javascript:" id="btn_zj" class="btn_an"><span></span><i class="btn_lzengjia" ></i>增加一行</a> </td>
</tr>
</table>
</body>
</html>人生得一知己 2014-04-08
- 打赏
- 举报
能不能给我再写一下 就是 数量那块不能是浮点数如果输入浮点数就显示1 否则的话就是当前的输入整数
Go 旅城通票 2014-04-08
- 打赏
- 举报
加了判断了，2个要填写才进行计算
你有价格没有数量计算没意义
为0，那不0*任何数量都是0了。
