用jQuery 实现表单数据的统计可新增多行

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #F8F9FA;
}
-->
</style>
<link href="https://www.linuxidc.com/css/Style.css" type="text/css" />
<link href="https://www.linuxidc.com/css/LaoNiu.css" type="text/css" />
<style type="text/css">
<!--
#Layer1 {
    position:absolute;
    width:656px;
    height:166px;
    z-index:1;
    left: 201px;
    top: 257px;
}
input{
    line-height:25px;
    font-size:14px;
    height:25px;
}
#Layer2 {
    position:absolute;
    width:304px;
    height:145px;
    z-index:2;
    left: 692px;
    top: 289px;
}
.style6 {color: #FF0000}
.STYLE10 {color: #000000; font-size: 12px; }
.style17 {font-weight: bold; color: #344b50; font-size: x-small; }
.STYLE23 {font-size: x-large}
.del{
    line-height:28px;
    float:left;
}
-->
</style>
<script type="text/javascript" src="https://www.linuxidc.com/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#add").click(function(){
        $("#total").before("<tr>    <td><label><input type=text size='15'/></label></td>    <td colspan='2'><input type=text size='22'/></td>    <td><label><input type=text size='8'/></label></td>    <td><input type=text size='8'/></td>    <td><input type=text size='8'/></td>    <td><input type=text size='8'/></td>    <td><input type=text size='8'/></td>    <td><input type=text size='8'/></td>    <td><input type=text size='8'/></td>    <td><input type=text size='8'/></td>    <td><a href='#'>删除此行</a></td>    <td><input type=text size='10'/></td>    </tr> ");    });
   
    $("a[href='#']").die().live('click',function(){
        $(this).parents(".info").remove();
        //alert($(this).attr("id"));
    });
   
    $('.item').die().live('focusout',function(){
        var temp = 0;
            var id = parseInt($(this).attr('id'));
       
            $("input[id="+id+"]").each(function(){
                //alert(id);
                temp+= parseFloat($(this).val());
                //alert($(this).val());
            })
            //alert(temp);
            var totalItem = "totalItem"+id;
            $("."+totalItem).val(temp);
            var totalMoneyItem = "totalMoneyItem"+id;
            var itemPrice = "item"+id+"Price";
            $("."+totalMoneyItem).val(temp*parseFloat($("."+itemPrice).val()));
            var temp = 0;
    });
    $(".totalMoney").bind('click',function(){
        $i=0;
        $totalMoneys = 0;   
        for(var i=1;i<=7; i++){
            $tempT = "totalMoneyItem"+i;
            $totalMoneys+=parseFloat($("."+$tempT).val());
        }
        $(".totalMoney").val($totalMoneys);
        $(".alredyPay").val(($totalMoneys*0.7).toFixed(4));
    })
   
});

</script>

</head>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/69a6c3093d7a8632b4a99658ee5bc600.html