遍历下数据行就行了,事件改为blur好点,keyup不必要,第一个表格的加个span样式和第二个统一起来,这样好用一个事件就搞定了
<!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.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('input').blur(compute)
})
function compute(){
var total=0,num,price,tr,v,rx=/^\d+(\.\d+)?$/
$(this).closest('table').find('tr:gt(0)').each(function(){
tr=$(this);
price=tr.find('input');
if(price.size()==0||!rx.test(price.val())){ tr.find('span.danhang_sum').html('');return true;}
num=parseInt(tr.find('td span').html());
price=parseFloat(price.val())
v=num*price;
total+=v;
tr.find('span.danhang_sum').html(v.toFixed(2));
}).end().find('span.total_sum').html(total.toFixed(2));
}
</script>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th>数量</th>
<th>单价</th>
<th>总价</th>
</tr>
<tr>
<td><span id="num">3</span></td>
<td><input type="text" ></td>
<td><span class="danhang_sum"></span></td>
</tr>
<tr>
<td colspan="2"><span style="color:red">总计:</span></td>
<td><span style="color:red">¥</span><span class="total_sum"></span></td>
</tr>
</table>
<br />
<br />
<br />
<hr>
<br />
<br />
<br />
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th>数量</th>
<th>单价</th>
<th>总价</th>
</tr>
<tr>
<td><span id="num">3</span></td>
<td><input type="text" ></td>
<td><span class="danhang_sum"></span></td>
</tr>
<tr>
<td><span id="num">8</span></td>
<td><input type="text" ></td>
<td><span class="danhang_sum"></span></td>
</tr>
<tr>
<td><span id="num">1</span></td>
<td><input type="text" ></td>
<td><span class="danhang_sum"></span></td>
</tr>
<tr>
<td colspan="2"><span style="color:red">总计:</span></td>
<td><span style="color:red">¥</span><span class="total_sum"></span></td>
</tr>
</table>
</body>
</html>
<!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.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('input').blur(compute)
})
function compute(){
var total=0,num,price,tr,v,rx=/^\d+(\.\d+)?$/
$(this).closest('table').find('tr:gt(0)').each(function(){
tr=$(this);
price=tr.find('input');
if(price.size()==0||!rx.test(price.val())){ tr.find('span.danhang_sum').html('');return true;}
num=parseInt(tr.find('td span').html());
price=parseFloat(price.val())
v=num*price;
total+=v;
tr.find('span.danhang_sum').html(v.toFixed(2));
}).end().find('span.total_sum').html(total.toFixed(2));
}
</script>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th>数量</th>
<th>单价</th>
<th>总价</th>
</tr>
<tr>
<td><span id="num">3</span></td>
<td><input type="text" ></td>
<td><span class="danhang_sum"></span></td>
</tr>
<tr>
<td colspan="2"><span style="color:red">总计:</span></td>
<td><span style="color:red">¥</span><span class="total_sum"></span></td>
</tr>
</table>
<br />
<br />
<br />
<hr>
<br />
<br />
<br />
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th>数量</th>
<th>单价</th>
<th>总价</th>
</tr>
<tr>
<td><span id="num">3</span></td>
<td><input type="text" ></td>
<td><span class="danhang_sum"></span></td>
</tr>
<tr>
<td><span id="num">8</span></td>
<td><input type="text" ></td>
<td><span class="danhang_sum"></span></td>
</tr>
<tr>
<td><span id="num">1</span></td>
<td><input type="text" ></td>
<td><span class="danhang_sum"></span></td>
</tr>
<tr>
<td colspan="2"><span style="color:red">总计:</span></td>
<td><span style="color:red">¥</span><span class="total_sum"></span></td>
</tr>
</table>
</body>
</html>
解决方案 »
- JQuery怎么实现页面刷新后保留鼠标点击addclass的样式
- 求一个网站的滑动切换效果实现方法
- 求使用JS局部刷新DIV,最好不要使用Ajax,高手进啊。。救命啊。。。
- 关于Javascript判断浏览器Flash版本
- 怎样将弹窗居中,总是在改网页前方
- 想实现一个类似IE的自定义工具栏的网页界面
- 可不可以用css给当前页的input输入框设置外观?
- 如何把IE浏览器的最上方一栏的图标和Microsoft Internet Explorer 改写或者 换掉!
- 请问如何判断用户是脱机还是连接
- 网页中如何用javascript识别本机是否进入屏保或待机状态
- 求解读关于瀑布流加载的JS代码问题?
- 关于删除最后一个字符串的问题。求帮助
感谢高手在次帮忙解决问题, 因为需求是要求输入后就要显示出来统计 所以不让用blur 呵呵~
请教高手一下 我想学JQUERY 能给提供点好的教程或者资料吗?