当前位置: 代码迷 >> Web前端 >> 用jquery来自动统计table行下的值
  详细解决方案

用jquery来自动统计table行下的值

热度:24   发布时间:2012-11-05 09:35:12.0
用jquery来自动统计table行上的值

最近做项目要用jquery来统计table中的所有行数据,现已完成demo,把代码贴出来,对了

jquery-1.7.1.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>jquery sum</title>

<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script language="javascript">

//window.onload=function(){alert("hello,world");};
//window.alert("ok");
//alert("ok2");
/*$(document).ready(function(){
  alert("hello,world");
 });
*/

 $(document).ready(function(){
   $("a").click(function(event){
    //console.log(event,event.type);
    alert("As you can see, the link no longer took you to jquery.com");
    event.preventDefault();
     $(this).hide("slow");
   });
    //console.log($("#aid").html());
     //$("#aid").each(function(i,n){ console.log(i,n);});
    //$("a").each(function(i,n){
     //console.log(i,n);
     //console.log($(this).attr("id"),',',$(this).attr("href"));
    //});
   
    //console.log($("#tb>tbody>tr:eq(1)").html());
    var count=0;
    var tbLen=$("#tb>tbody>tr").length;
    for(j=0;j<tbLen;j++){
        $("#tb>tbody>tr:eq("+j+")>td>input").each(function(i,n){
        //this(n).find("input").each(function(j,k){
        //console.log(j,k);
        //});
       
        //console.log($(this).attr("value"),",",$(this).val());
        if (i==2){
            $(this).val(count);
            count=0;
        }else{
            count+=parseInt($(this).val());
        }
        });
    }
    //console.log($("a"), $("a:first"));
 });

 
</script>


</head>


<body>
<table width="594" height="88" border="1" id="tb">
<tr>
    <td><input name="test1" type="text" value="5" /></td><td><input name="test2" type="text" value="2" /></td><td>count:<input name="test3" type="text" /></td>
</tr>

<tr>
    <td><input name="test1" type="text" value="5" /></td><td><input name="test2" type="text" value="3" /></td><td>count:<input name="test3" type="text" /></td>
</tr>

<tr>
    <td><input name="test1" type="text" value="4" /></td><td><input name="test2" type="text" value="5" /></td><td>count:<input name="test3" type="text" /></td>
</tr>

</table>

<a id="aid" href="http://jquery.com/">jQuery</a>&nbsp;&nbsp;<a id="bid" href="#">china</a>


</body>

</html>

  相关解决方案