js表格求和

最新推荐文章于 2023-08-30 14:13:16 发布

mush_me

最新推荐文章于 2023-08-30 14:13:16 发布

阅读量568

点赞数

分类专栏： javascript相关文章标签： jQuery HTML ViewUI

javascript相关专栏收录该内容

22 篇文章 0 订阅

订阅专栏

此代码用js在客户端自动求和，具体可以根据自己的要求拓展


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>table_count.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<!-- 引入jQuery -->
		<script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script>
  </head>
<body>
	<table id="count_table">
		<tr>
			<td><input value="33" name="no1" id="no1" onblur="setAllCount();"/></td>
			<td></td>
		</tr>
		<tr>
			<td><input value="11" name="no2" id="no2" onblur="setAllCount();"/></td>
			<td></td>
		</tr>
		<tr>
			<td><input value="22" name="no3" id="no3"/></td>
			<td><input type="button" value="计算" onclick="setAllCount();"/></td>
		</tr>
	</table>
	<div id="count_result"></div>

	<script type="text/javascript">
	$().ready(function() {
	setAllCount();
	});
		function setAllCount(){
			var tr_id=0;//要统计的行数
	        var total1 = 0.00;
		    var itemtable = document.getElementById("count_table");//需要统计的table的id
		    var length = itemtable.childNodes[0].childNodes.length;
		    tr_id=length;//计算要统计的行数

		    for(var i=1;i<=tr_id;i++){
		       if(""!=($("#no"+i).val())&&null!=($("#no"+i).val())){
		         total1 = total1+parseFloat($("#no"+i).val());
		       }else{
		         total1 = total1+parseFloat(0.00);
		       }
		    } 

		     $("#count_result").html(total1.toFixed(0));
		    return true;
	}
	</script>
</body>
</html>