歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

用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="css/Style.css" rel="stylesheet" type="text/css" />
<link href="css/LaoNiu.css" type="text/css" rel="stylesheet" />
<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="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#add").click(function(){
        $("#total").before("<tr class='info'>    <td><label><input type=text size='15'/></label></td>    <td colspan='2'><input type=text size='22'/></td>    <td width='7%' height='41'><label><input type=text class='item' id='1' size='8'/></label></td>    <td width='7%'><input type=text class='item' id='2' size='8'/></td>    <td width='7%'><input type=text class='item' id='3' size='8'/></td>    <td width='7%'><input type=text class='item' id='4' size='8'/></td>    <td width='8%'><input type=text class='item' id='5' size='8'/></td>    <td width='8%'><input type=text class='item' id='6' size='8'/></td>    <td width='7%'><input type=text class='item' id='7' size='8'/></td>    <td width='6%'><input type=text class='item' id='8' 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>

<body>
<div >
<strong>經費管理</strong>>>>工程進度款申請單
</div>
<form id="form1" name="form1" method="post" action="" class="STYLE10">
<p></p>
<table width="80%"align="center" cellpadding="0px" cellspacing="0">

 <tr>
    <td height="49" colspan="13" align="center"><h1><span class="STYLE23">工程進度款申請單</span></h1></td>
    </tr>
  <tr>
    <td width="10%" rowspan="2" align="center">項目名稱</td>
    <td colspan="2" rowspan="2" align="center">中繼段落</td>
    <td height="36" colspan="8" align="center">工    作    量(千米)</td>
    <td width="8%" rowspan="2" align="center">總金額</td>
    <td width="9%" rowspan="2" align="center">備注</td>
  </tr>
  <tr>
    <td width="7%" height="41">附掛光纜</td>
    <td width="7%">直埋光纜</td>
    <td width="7%">布放管道</td>
    <td width="7%">新建管道</td>
    <td width="8%">新建桿路光纜</td>
    <td width="8%"><p >舊桿路增吊</p></td>
    <td width="7%">牆壁敷設光纜</td>
    <td width="6%">新立光交箱</td>
    </tr>
    <tr class='info'>
    <td><label><input type=text size='15'/></label></td>
    <td colspan='2'><input type=text size='22'/></td>
    <td width='7%' height='41'><label><input type=text class='item' id='1' size='8'/></label></td>
    <td width='7%'><input type=text class='item' id='2' size='8'/></td>
    <td width='7%'><input type=text class='item' id='3' size='8'/></td>
    <td width='7%'><input type=text class='item' id='4' size='8'/></td>
    <td width='8%'><input type=text class='item' id='5' size='8'/></td>
    <td width='8%'><input type=text class='item' id='6' size='8'/></td>
    <td width='7%'><input type=text class='item' id='7' size='8'/></td>
    <td width='6%'><input type=text class='item' id='8' size='8'/></td>
    <td><a href='#'>刪除此行</a></td>
    <td><input type=text size='10'/></td>
    </tr>
  <tr id="total">
    <td height="31" colspan="3" align="center">總工程價</td>
    <td><input type="text" class="totalItem1" size="8" /></td>
    <td><input type="text" class="totalItem2" size="8" /></td>
    <td><input type="text" class="totalItem3" size="8" /></td>
    <td><input type="text" class="totalItem4" size="8" /></td>
    <td><input type="text" class="totalItem5" size="8" /></td>
    <td><input type="text" class="totalItem6" size="8" /></td>
    <td><input type="text" class="totalItem7" size="8" /></td>
    <td><input type="text" class="totalItem8" size="8" /></td>
    <td>&nbsp;</td>
    <td><input type="text" size="10" /></td>
  </tr>
  <tr>
    <td height="27" colspan="3" align="center">單價</td>
    <td><input type="text" size="8" class="item1Price" value="5" /></td>
    <td><input type="text" size="8" class="item2Price" value="8" /></td>
    <td><input type="text" size="8" class="item3Price" value="15" /></td>
    <td><input type="text" size="8" class="item4Price" value="5" /></td>
    <td><input type="text" size="8" class="item5Price" value="30" /></td>
    <td><input type="text" size="8" class="item6Price" value="25" /></td>
    <td><input type="text" size="8" class="item7Price" value="12" /></td>
    <td><input type="text" size="8" class="item8Price" value="12" /></td>
    <td>&nbsp;</td>
    <td><input type="text" size="10" /></td>
  </tr>
  <tr>
    <td height="34" colspan="3" align="center">總金額</td>
    <td><input type="text" class="totalMoneyItem1" size="8" /></td>
    <td><input type="text" class="totalMoneyItem2" size="8" /></td>
    <td><input type="text" class="totalMoneyItem3" size="8" /></td>
    <td><input type="text" class="totalMoneyItem4" size="8" /></td>
    <td><input type="text" class="totalMoneyItem5" size="8" /></td>
    <td><input type="text" class="totalMoneyItem6" size="8" /></td>
    <td><input type="text" class="totalMoneyItem7" size="8" /></td>
    <td><input type="text" class="totalMoneyItem8" size="8"  /></td>
    <td><input type="text" size="10" class="totalMoney" /></td>
    <td><input type="text" size="10" /></td>
  </tr>
  <tr>
    <td height="33" colspan="3" align="center">付款</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><input type="text" size="10" class="alredyPay" /></td>
    <td><input type="text" size="10" /></td>
  </tr>
  <tr>
    <td height="34" colspan="3" align="center">已付金額</td>
    <td colspan="10" align="left"><input type="text" size="30" /></td>
    </tr>
  <tr>
    <td height="28" colspan="3" align="center">本次需求支付金額(元)</td>
    <td colspan="10" align="left"><input type="text" size="30" /></td>
    </tr>
  <tr>
    <td height="31" colspan="3" align="center">請款人賬號</td>
    <td colspan="10" align="left"><div><input type="text" size="30" />
    &nbsp;&nbsp;&nbsp;&nbsp;申 請 人&nbsp;&nbsp;  
        <input type="text" size="15" /></div></td>
    </tr>
</table>
<table width="1064px" cellspacing="0" cellpadding="0" align="center" >
  <tr>
    <td width="14%">出納:
      <input type="text" size="8" /></td>
    <td width="14%">總經理:
      <input type="text" size="8" /></td>
    <td width="13%">會計:
      <input type="text" size="8" /></td>
    <td width="18%">辦公室主任:
      <input type="text" size="8" /></td>
    <td width="19%">工作量統計員:
      <input type="text" size="8" /></td>
    <td width="22%">部門經理:
      <input type="text" size="8" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td align="right"><input type="button" name="button" id="add" value="新 增"/></td>
    <td><label></label></td>
    <td><input type="submit" name="Submit" value="提 交" /></td>
    <td><input type="reset" name="Submit2" value="重 置" /></td>
    <td>&nbsp;</td>
  </tr>
</table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<p></p>
 
</form>
</body>
</html>

Copyright © Linux教程網 All Rights Reserved