一个简单的js事件，循环table并自动计算总价

最新推荐文章于 2023-07-22 20:02:10 发布

Kav3000

最新推荐文章于 2023-07-22 20:02:10 发布

阅读量2.9k

点赞数

本文链接：https://blog.csdn.net/kid3000/article/details/8870087

版权

<html>
  <head>
    <title>texter</title>
	<script type="text/javascript">
		function $get(id){
			return document.getElementById(id);
		}
		var table=null;
		function caculPrice(){
			var sum=0;
			//注意这里要表格长度-1，因为总价哪一行并不参与计算，只显示结果
			for(var i=0;i<table.rows.length-1;i++){
				var price=parseFloat(table.rows[i].cells[0].innerHTML);//单价
				var num=parseFloat(table.rows[i].cells[2].innerHTML);//数量
				sum=price*num+sum;
			}
			$get('price').innerHTML=sum;
		}
		function delRow(id){
			table=$get('mytable');
			var row=$get(id);
			table.deleteRow(row.rowIndex)
			caculPrice();
		}
	</script>
  </head>
  
  <body>
    <table id="mytable" border="1">
    	<tr id="tr1" >
    		<td>1888</td><td>sss</td><td>3</td><td οnclick="delRow('tr1')">删除</td>
		</tr>
		<tr id="tr2" >
    		<td>999</td><td>1888</td><td>4</td><td οnclick="delRow('tr2')">删除</td>
		</tr>
		<tr id="tr3" >
    		<td>9999</td><td>sssss</td><td>5</td><td οnclick="delRow('tr3')">删除</td>
		</tr>
		<tr id="tr" >
    		<td colspan="4" id="price">9999</td>
		</tr>
    </table>
  </body>
</html>

Kav3000

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
一个简单的js事件，循环table并自动计算总价

texter function $get(id){ return document.getElementById(id); } var table=null; function caculPrice(){ var sum=0; //注意这里要表格长度-1，因为总价哪一行并不参与计算，只显示结果 for(var i=0;i<table.rows.lengt
复制链接

扫一扫