歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> 用jQuery 實現表單數據的統計可新增多行

用jQuery 實現表單數據的統計可新增多行

日期:2017/3/1 10:12:22   编辑:Linux編程

<!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