87,902
社区成员
发帖
与我相关
我的任务
分享多行表单，如何自动计算金额？
输入数量、单价后，自动显示金额js怎么写？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title></title>
</head>
<body>
<table>
<tr>
<th>数量</th>
<th>单价</th>
<th>金额</th>
</tr>
<tr>
<td><input type="text" name="num1" id="num1" value="" /></td>
<td><input type="text" name="up1" id="up1" value="" /></td>
<td><input type="text" name="mon1" id="mon1" value="" /></td>
</tr>
<tr>
<td><input type="text" name="num2" id="num2" value="" /></td>
<td><input type="text" name="up2" id="up2" value="" /></td>
<td><input type="text" name="mon2" id="mon2" value="" /></td>
</tr>
<tr>
<td><input type="text" name="num3" id="num3" value="" /></td>
<td><input type="text" name="up3" id="up3" value="" /></td>
<td><input type="text" name="mon3" id="mon3" value="" /></td>
</tr>
</table>
</body>
</html>
...全文
请发表友善的回复…
发表回复
xyy7309 2014-09-22
- 打赏
- 举报
<table>
<tr>
<th>数量</th>
<th>单价</th>
<th>金额</th>
</tr>
<% for i=1 to 3 %>
<tr>
<td><input type="text" name="num<%= i %>" id="num<%= i %>" value="" /></td>
<td><input type="text" name="up<%= i %>" id="up<%= i %>" value="" onChange="hjje('<%= i %>')"/></td>
<td><input type="text" name="mon<%= i %>" id="mon<%= i %>" value="" /></td>
</tr>
<% Next %>
</table>
<script>
function hjje(a)
{
var sumsl=0;
document.getElementById("mon"+a).value=document.getElementById("num"+a).value*document.getElementById("up"+a).value
}
</script>
xyy7309 2014-09-22
- 打赏
- 举报
比较简单的JS
csucaicai 2014-09-22
- 打赏
- 举报
onblur方法，失去焦点就计算
zhaofeng0420 2014-09-16
- 打赏
- 举报
这个貌似不支持火狐哦
熏肉大饼 2014-09-15
- 打赏
- 举报
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title></title>
</head>
<script>
//计算
function getSum(i){
var num = "num"+i;
var up = "up"+i;
var mon = "mon"+i;
var nid = new Number(document.getElementById(num).value);
var uid = new Number(document.getElementById(up).value);
var mid = new Number(document.getElementById(mon).value);
var sid = document.getElementById("sum"+i);
var sum = nid*uid*mid;
sid.value=sum
}
//验证
function vali(obj){
var v = obj.value;
var reg=/[^0-9]/g;
if(reg.test(v))
obj.value = v.replace(reg,"");
}
</script>
<body>
<table>
<tr>
<th>数量</th>
<th>单价</th>
<th>金额</th>
<th>总计</th>
</tr>
<tr>
<td><input type="text" name="num1" id="num1" onkeyup="vali(this)" onblur="getSum(1)" value="" /></td>
<td><input type="text" name="up1" id="up1" onkeyup="vali(this)" onblur="getSum(1)" value="" /></td>
<td><input type="text" name="mon1" id="mon1" onkeyup="vali(this)" onblur="getSum(1)" value="" /></td>
<td><input type="text" name="sum1" id="sum1" onkeyup="vali(this)" disabled="disabled" value="" /></td>
</tr>
<tr>
<td><input type="text" name="num2" id="num2" onkeyup="vali(this)" onblur="getSum(2)" value="" /></td>
<td><input type="text" name="up2" id="up2" onkeyup="vali(this)" onblur="getSum(2)" value="" /></td>
<td><input type="text" name="mon2" id="mon2" onkeyup="vali(this)" onblur="getSum(2)" value="" /></td>
<td><input type="text" name="sum1" id="sum2" onkeyup="vali(this)" disabled="disabled" value="" /></td>
</tr>
<tr>
<td><input type="text" name="num3" id="num3" onkeyup="vali(this)" onblur="getSum(3)" value="" /></td>
<td><input type="text" name="up3" id="up3" onkeyup="vali(this)" onblur="getSum(3)" value="" /></td>
<td><input type="text" name="mon3" id="mon3" onkeyup="vali(this)" onblur="getSum(3)" value="" /></td>
<td><input type="text" name="sum1" id="sum3" onkeyup="vali(this)" disabled="disabled" value="" /></td>
</tr>
</table>
</body>
</html>
似梦飞花 2014-09-15
- 打赏
- 举报
额 监听keydown keyup？
xuzuning 2014-09-15
- 打赏
- 举报
id 都不需要
<table onkeyup=foo()>
<tr>
<th>数量</th>
<th>单价</th>
<th>金额</th>
</tr>
<tr>
<td><input type="text" name="num1" id="num1" value="" /></td>
<td><input type="text" name="up1" id="up1" value=""/></td>
<td><input type="text" name="mon1" id="mon1" value="" /></td>
</tr>
<tr>
<td><input type="text" name="num2" id="num2" value="" /></td>
<td><input type="text" name="up2" id="up2" value=""/></td>
<td><input type="text" name="mon2" id="mon2" value="" /></td>
</tr>
<tr>
<td><input type="text" name="num3" id="num3" value="" /></td>
<td><input type="text" name="up3" id="up3" value=""/></td>
<td><input type="text" name="mon3" id="mon3" value="" /></td>
</tr>
</table>
<script type="text/javascript">
function foo(e) {
e = e || window.event;
var el = e.Target || e.srcElement
while(el.nodeName != 'TR') el = el.parentNode;
var o = el.getElementsByTagName('input');
o[2].value = o[0].value * o[1].value;
}
</script>xuzuning 2014-09-15
- 打赏
- 举报
<table onkeyup=foo()>
<tr>
<th>数量</th>
<th>单价</th>
<th>金额</th>
</tr>
<tr>
<td><input type="text" name="num1" id="num1" value="" /></td>
<td><input type="text" name="up1" id="up1" value="" onChange="js('1')" /></td>
<td><input type="text" name="mon1" id="mon1" value="" /></td>
</tr>
<tr>
<td><input type="text" name="num2" id="num2" value="" /></td>
<td><input type="text" name="up2" id="up2" value="" onChange="js('2')"/></td>
<td><input type="text" name="mon2" id="mon2" value="" /></td>
</tr>
<tr>
<td><input type="text" name="num3" id="num3" value="" /></td>
<td><input type="text" name="up3" id="up3" value="" onChange="js('3')"/></td>
<td><input type="text" name="mon3" id="mon3" value="" /></td>
</tr>
</table>
<script type="text/javascript">
function foo(e) {
e = e || window.event;
var el = e.Target || e.srcElement
while(el.nodeName != 'TR') el = el.parentNode;
var o = el.getElementsByTagName('input');
o[2].value = o[0].value * o[1].value;
}
</script>xyy7309 2014-09-15
- 打赏
- 举报
一个超级简单的JS就可以实现：
<table>
<tr>
<th>数量</th>
<th>单价</th>
<th>金额</th>
</tr>
<tr>
<td><input type="text" name="num1" id="num1" value="" /></td>
<td><input type="text" name="up1" id="up1" value="" onChange="js('1')" /></td>
<td><input type="text" name="mon1" id="mon1" value="" /></td>
</tr>
<tr>
<td><input type="text" name="num2" id="num2" value="" /></td>
<td><input type="text" name="up2" id="up2" value="" onChange="js('2')"/></td>
<td><input type="text" name="mon2" id="mon2" value="" /></td>
</tr>
<tr>
<td><input type="text" name="num3" id="num3" value="" /></td>
<td><input type="text" name="up3" id="up3" value="" onChange="js('3')"/></td>
<td><input type="text" name="mon3" id="mon3" value="" /></td>
</tr>
</table>
<script type="text/javascript">
function js(a)
{
document.getElementById("mon"+a).value=document.getElementById("num"+a).value*document.getElementById("up"+a).value
}
</script>
zhaofeng0420 2014-09-14
- 打赏
- 举报
输完数量和单价后并没有马上出来金额，要这里点点那里点点才出来
似梦飞花 2014-09-14
- 打赏
- 举报
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title></title>
</head>
<body>
<table>
<tr>
<th>数量</th>
<th>单价</th>
<th>金额</th>
</tr>
<tr>
<td><input type="text" name="num1" id="num1" value="" /></td>
<td><input type="text" name="up1" id="up1" value="" /></td>
<td><input type="text" name="mon1" id="mon1" value="" /></td>
</tr>
<tr>
<td><input type="text" name="num2" id="num2" value="" /></td>
<td><input type="text" name="up2" id="up2" value="" /></td>
<td><input type="text" name="mon2" id="mon2" value="" /></td>
</tr>
<tr>
<td><input type="text" name="num3" id="num3" value="" /></td>
<td><input type="text" name="up3" id="up3" value="" /></td>
<td><input type="text" name="mon3" id="mon3" value="" /></td>
</tr>
</table>
<script type="text/javascript">
var inputs=document.getElementsByTagName('input');
for(var i=0,len=inputs.length;i<len;i++){
(function(i){
inputs[i].onblur=function(){
var d=Math.ceil(i/3);
var num=document.getElementById('num'+d),
up=document.getElementById('up'+d),
mon=document.getElementById('mon'+d);
var reg=/^\d+(\.\d+)?$/;
if(reg.test(num.value)&®.test(up.value)){
mon.value=num.value*up.value;
}
}
})(i)
}
</script>
</body>
</html>
