用jQuery d表单达成数据的统计可新增多行
发布时间：2021-11-22 13:46:32 所属栏目：教程 来源：互联网
导读：!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无标题文
|
<!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 style="height:60; font-size:12px; line-height:60px; margin-left:80px; text-align:left;"> <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> </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> </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> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </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" /> 申 请 人 <input type="text" size="15" /></div></td> </tr> </table> <table width="1064px" cellspacing="0" cellpadding="0" align="center" style="margin-top:10px;"> <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> </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> </td> </tr> </table> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <p></p> </form> </body> </html>  （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
