读书人

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

发布时间: 2012-11-05 09:35:12 作者: rapoo

用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>  <a id="bid" href="#">china</a></body></html>

读书人网 >Web前端

热点推荐