首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现动态添加、删除行、onkeyup表格求和示例

Posted in Javascript onAugust 18, 2013 
<%@ page language="java" contentType="text/html; charset=UTF-8" 
pageEncoding="UTF-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>发货申请</title> 
<script type="text/javascript"> 
function countTotalRealPrice(){ 
var productNeedNum = $("#productNeedNum").val(); 
var realPrice= $("#realPrice").val(); 
var totalRealPrice=productNeedNum*realPrice; 
$("#totalRealPrice").val(totalRealPrice); } 
function countTotalTicketPrice(){ 
var productNeedNum = $("#productNeedNum").val(); 
var ticketPrice = $("#ticketPrice").val() 
var totalTicketPrice= productNeedNum*ticketPrice; 
$("#totalTicketPrice").val(totalTicketPrice); 
} 
$(function(){ 
$("#t1").css("display", "none"); 
$("#t2").css("display", "none"); 
$("#t3").css("display", "none"); 
$("#t4").css("display", "none"); 
$("#t5").css("display", "none"); 
}); 
/* function sumNum(){ 
$("input[name=productNeedNum]").each(function(){ 
//alert($(this).attr("id"));//每一个的id 
var productNeedNum=$("#productNeedNum").attr("value") 
alert(productNeedNum); 
// var sum += productNeedNum; 
//alert("sum:"+sum); 
// $("#sum").val(sum); 
}); 
} */ 
function addRow(){ 
var x=document.getElementById('tb1').insertRow(3); 
var a=x.insertCell(0) 
var b=x.insertCell(1) 
var c=x.insertCell(2) 
var d=x.insertCell(3) 
var e=x.insertCell(4) 
var f=x.insertCell(5) 
var g=x.insertCell(6) 
var h=x.insertCell(7) 
var a1 = "<select id='productId' name='productId' style='width: 140px;height: 22px; text-align: center;'><c:forEach items='${productIdNames}' var='p'><option value='${p.productId }'>${p.commName }</option></c:forEach></select>"; 
var b1="<select id='typeName' name='typeName' style='width: 140px;height: 22px; text-align: center;'><c:forEach items='${typeInfos }' var='ti'><option value='${ti.typeId }'> ${ti.typeName }</option></c:forEach> </select>"; 
var c1 = "<select id='' name='' style='width: 70px;height: 22px; text-align: center;'><option value='0'> 盒</option><option value='1'> 瓶</option></select>"; 
var d1="<input onkeyup='sum(this.id)' name='productNeedNum' id='productNeedNum' type='text' style='width:89%;height: 18px' value='0' />"; 
var e1='<input onkeyup="sum(this.id)" name="realPrice" id="realPrice" type="text" style=" width:89%;height: 18px;" value="0"/>'; 
var f1='<input onkeyup="sum(this.id)" name="ticketPrice" id="ticketPrice" type="text" style=" width:91%;height: 18px;" value="0"/>'; 
var g1='<input name="totalRealPrice" id="totalRealPrice" type="text" style=" width:92%;height: 18px;" value="0" />'; 
var h1="<input name='totalTicketPrice' id='totalTicketPrice' type='text' style=' width:92.5%;height: 18px;' value='0' />"; 
a.innerHTML=a1 
b.innerHTML=b1 
c.innerHTML=c1 
d.innerHTML=d1 
e.innerHTML=e1 
f.innerHTML=f1 
g.innerHTML=g1 
h.innerHTML=h1 
} 
function deleteRow(){ 
var tab = document.getElementById('tb1'); 
if(tab.rows.length > 4) 
{ 
tab.deleteRow(tab.rows.length-2); 
}else{ 
alertMsg.confirm("已经剩下最后一行，不能删除！"); 
} 
} 
function sum(x){ 
var y=document.getElementById(x).value; 
if(isNaN(y)){ 
document.getElementById(x).value=0; 
} 
var num=document.getElementById("productNeedNum").value; 
var realPrice=document.getElementById("realPrice").value; 
var ticketPrice=document.getElementById("ticketPrice").value; 
var total=0; 
if(realPrice!=null){ 
total=num*realPrice; 
document.getElementById("totalRealPrice").value=total; 
} 
if(ticketPrice!=null){ 
total=num*ticketPrice; 
document.getElementById("totalTicketPrice").value=total; 
} 
} 
</script> 
</head> 
<body> 
<form id="form1" method="post" action="${basePath}/sale/deliverSaleApply" class="pageForm required-validate" onsubmit="return validateCallback(this,navTabAjaxDone)"> 
<div class="pageFormContent nowrap" layoutH="56"> 
<div style="text-align:center; top: 90px;position: relative;"> 
<table width="752" border="1px;" align="center" style="border-collapse:collapse;border:1px solid black;margin:auto;"> 
<tr height="20px;"> 
<td style="width:180px; height:20px; vertical-align: middle">申请人: 
<input name="fullName" id="fullName" type="text" value="${user.fullName }" disabled="true" /> 
</td> 
<td width="100" align="left">区域: 
<select id="areaId" name="areaId" > 
<c:forEach items="${areaTypes}" var="a"> 
<option value="${a.areaId}">${a.areaName }</option> 
</c:forEach> 
</select> 
</td> 
<td width="180" align="left">申请日期: 
<input name="applyDate" id="applyDate" type="text" class="date textInput readonly " style="width: 40%" readonly="readonly"/> 
<a class="inputDateButton" href="javascript:;">选择</a> 
</td> 
<td style="width:288px; height:20px; vertical-align: middle">业务类型： 
<input type="radio" name="serviceId" id="" value="0" checked="checked"/>即发 
<input type="radio" name="serviceId" id="" value="1"/>即发即开 
<input type="radio" name="serviceId" id="" value="2"/>其他 
</td> 
</tr> 
</table> 
<table width="752" border="1px;" align="center" style="border-collapse:collapse;border:1px solid black;margin:auto;"> 
<tr> 
<td width="121" height="18px;">收货单位全称</td> 
<td width="615"><input name="fullName" id="fullName" type="text" style=" width:99%;height: 20px;"/></td> 
</tr> 
</table> 
<table width="752" border="1px;" align="center" style="border-collapse:collapse;border:1px solid black;margin:auto;" id="tb1"> 
<tr> 
<td width="54" rowspan="80">申请发货明细</td> 
<td width="82" rowspan="2" height="40px;">产品名称</td> 
<td width="65" rowspan="2">规格</td> 
<td colspan="2">数量</td> 
<td colspan="2">单价</td> 
<td colspan="2">结算贷款</td> 
</tr> 
<tr> 
<td width="54">盒/瓶</td> 
<td width="53">件</td> 
<td width="56">实价(元)</td> 
<td width="63">开票价(元)</td> 
<td width="72" onclick="deleteRow()">实价合计(元)</td> 
<td width="85" onclick="addRow()">开票价合计(元)</td> 
</tr> 
<tr id="a1"> 
<td height="20px;"> 
<select id="productId" name="productId" style="width: 140px;height: 22px; text-align: center;"> 
<c:forEach items="${productIdNames}" var="p"> 
<option value="${p.productId }">${p.commName }</option> 
</c:forEach> 
</select> 
</td> 
<td> 
<select id="typeName" name="typeName" style="width: 140px;height: 22px; text-align: center;"> 
<c:forEach items="${typeInfos }" var="ti"> 
<option value="${ti.typeId }"> ${ti.typeName }</option> 
</c:forEach> 
</select> 
</td> 
<td> 
<select id="" name="" style="width: 70px;height: 22px; text-align: center;"> 
<option value="0"> 盒</option> 
<option value="1"> 瓶</option> 
</select> 
</td> 
<td><input name="productNeedNum" id="productNeedNum" type="text" style=" width:89%;height: 18px;" value="0" onkeyup="sum(this.id)"/></td> 
<td><input name="realPrice" id="realPrice" type="text" style=" width:89%;height: 18px;" value="0" onkeyup="sum(this.id)"/></td> 
<td><input name="ticketPrice" id="ticketPrice" type="text" style=" width:91%;height: 18px;" value="0" onkeyup="sum(this.id)"/></td> 
<td><input name="totalRealPrice" id="totalRealPrice" type="text" style=" width:92%;height: 18px;" value="0" /></td> 
<td><input name="totalTicketPrice" id="totalTicketPrice" type="text" style=" width:92.5%;height: 18px;" value="0" /></td> 
</tr> 
<tr> 
<td >合计</td> 
<td height="18px;"> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
<td> </td> 
</tr> 
</table> 
<table width="752" border="1px;" align="center" style="border-collapse:collapse;border:1px solid black;margin:auto;"> 
<tr> 
<td width="91" height="30px;">结算/付款方式</td> 
<td colspan="7"> 
<input type="radio" name="pay" id="" checked="checked" value="0"/>对公 
<input type="radio" name="pay" id="" value="1"/>对私 
<input type="radio" name="pay" id="" value="2"/>非现 
</td> 
</tr> 
<tr> 
<td rowspan="3">发货资料</td> 
<td width="68" height="18px;">发货方式</td> 
<td width="36"> 
<select id="sendType" name="sendType" style="width: 70px;height: 25px;"> 
<option value="0">邮政</option> 
<option value="1">申通</option> 
<option value="2">其他</option> 
</select></td> 
<td width="73">发货始限</td> 
<td width="100"> <input name="accessionDate" id="accessionDate" type="text" class="date textInput readonly" style=" width:76%;height: 18px;" readonly="readonly"/> 
<a class="inputDateButton" href="javascript:;">选择</a></td> 
<td colspan="3"> 
<input type="radio" name="priorityFlag" id="common" checked="checked" value="0"/>普通件 
         <input type="radio" name="priorityFlag" id="urgency" value="1"/>急件 
</td> 
</tr> 
<tr> 
<td height="18px;">收货地址</td> 
<td colspan="6"><input name="recvAddr" id="recvAddr" type="text" style=" width:99%;height: 20px;"/></td> 
</tr> 
<tr> 
<td height="18px;">到站</td> 
<td><input name="arriveAddr" id="arriveAddr" type="text" style=" width:91%;height: 20px;"/></td> 
<td>收货人</td> 
<td><input name="recvPerson" id="recvPerson" type="text" style=" width:94%;height: 20px;"/></td> 
<td width="73">联系方式</td> 
<td colspan="2"><input name="contactPhone" id="contactPhone" type="text" style=" width:97.7%;height: 20px;"/></td> 
</tr> 
<tr> 
<td rowspan="2" >审批</td> 
<td colspan="2" height="18px;">总经理室</td> 
<td colspan="2">市场部</td> 
<td colspan="3">所在区域</td> 
</tr> 
<tr> 
<td colspan="2" height="20px;"> 
<input type="radio" id="" name="approvalTwo" checked="checked" value="0"/>不同意 
<input type="radio" id="" name="approvalTwo" value="1" disabled="true"/>同意 
</td> 
<td colspan="2"> 
<input type="radio" id="" name="approvalOne" checked="checked" value="0"/>不同意 
<input type="radio" id="" name="approvalOne" value="1" disabled="true"/>同意 
</td> 
<td colspan="3"> 
<input type="radio" id="" name="approvalThree" checked="checked" value="0"/>不同意 
<input type="radio" id="" name="approvalThree" value="1" disabled="true"/>同意 
</td> 
</tr> 
</table> 
<table width="752" border="1px;" align="center" style="border-collapse:collapse;border:1px solid black;margin:auto;" id="t1"> 
<tr> 
<td width="398" height="30px;">以下由市场部/财务部填写</td> 
</tr> 
</table> 
<table width="752" border="1px;" align="center" style="border-collapse:collapse;border:1px solid black;margin:auto;" id="t2"> 
<tr> 
<td width="96" rowspan="4">贷款给付情况</td> 
<td width="96" height="30px;">入账时间</td> 
<td width="179">入账银行 账号/卡号</td> 
<td width="85">入账金额</td> 
<td colspan="2">经办人</td> 
</tr> 
<tr> 
<td height="30px;"><input name="recvTime" id="recvTime" type="text" class="date textInput readonly " style=" width:81%;height: 24px;" readonly="readonly"/> 
<a class="inputDateButton" href="javascript:;">选择</a></td> 
<td><input name="cardNo" id="cardNo" type="text" style=" width:97.2%;height: 24px;"/></td> 
<td><input name="balance" id="balance" type="text" style=" width:94.9%;height: 24px;"/></td> 
<td width="57"><input disabled="true" name="dealPerson" id="dealPerson" type="text" style=" width:93%;height: 24px;" value="${user.fullName}"/></td> 
</tr> 
</table> 
<table width="752" border="1px;" align="center" style="border-collapse:collapse;border:1px solid black;margin:auto;" id="t3"> 
<tr> 
<td width="76" rowspan="2">发运情况</td> 
<td width="80" height="30px;">发运时间</td> 
<td width="139"> 
<input name="sendTime" id="sendTime" type="text" class="date textInput readonly " style=" width:83%;height: 24px;" readonly="readonly"/> 
<a class="inputDateButton" href="javascript:;">选择</a> 
</td> 
<td width="119">经办人</td> 
<td width="128"><input name="dealPerson" id="dealPerson" disabled="true" type="text" style=" width:95.5%;height: 24px;" value="${user.fullName}"/></td> 
<td width="170">《内部发货单》号码</td> 
</tr> 
<tr> 
<td height="30px;">承运单位</td> 
<td><input name="sendUnit" id="sendUnit" type="text" style=" width:96%;height: 24px;"/></td> 
<td>运单号码</td> 
<td><input name="postId" id="postId" type="text" style=" width:95.5%;height: 24px;"/></td> 
<td><input name="innerSendOrderNum" id="innerSendOrderNum" type="text" style=" width:96.5%;height: 24px;"/></td> 
</tr> 
</table> 
<table width="752" border="1px;" align="center" style="border-collapse:collapse;border:1px solid black;margin:auto;" id="t4"> 
<tr> 
<td width="219" rowspan="4">申请开票事项</td> 
<td width="70" height="30px;" >客户(收票)全称</td> 
<td colspan="4"><input name="custChecks" id="custChecks" type="text" style=" width:98.5%;height: 24px;"/></td> 
</tr> 
<tr> 
<td height="30px;">单位地址</td> 
<td colspan="4"><input name="companyAddr" id="companyAddr" type="text" style=" width:98.5%;height: 24px;"/></td> 
</tr> 
<tr> 
<td height="30px;">单位税号</td> 
<td width="53" colspan="2"><input name="cardNo" id="cardNo" type="text" style=" width:95.5%;height: 24px;"/></td> 
<td width="76">电话</td> 
<td width="152"><input name="phone" id="phone" type="text" style=" width:96.5%;height: 24px;"/></td> 
</tr> 
<tr> 
<td height="30px;">开户银行</td> 
<td colspan="2"><input name="acctBank" id="acctBank" type="text" style=" width:95.5%;height: 24px;"/></td> 
<td>账号</td> 
<td><input name="acctNum" id="acctNum" type="text" style=" width:96.5%;height: 24px;"/></td> 
</tr> 
<tr> 
<td rowspan="4">发票开具领用情况</td> 
<td height="30px;">开票时间</td> 
<td colspan="2"><input name="invoiceTime" id="invoiceTime" type="text" class="date textInput readonly " style=" width:83%;height: 24px;" readonly="readonly"/> 
<a class="inputDateButton" href="javascript:;">选择</a></td> 
<td>发票号码</td> 
<td><input name="invoiceNum" id="invoiceNum" type="text" style=" width:96.5%;height: 24px;"/></td> 
</tr> 
<tr> 
<td rowspan="3">开票款额</td> 
<td height="30px;" width="55px;">金额</td> 
<td width="75px;"><input name="invoiceMoney" id="invoiceMoney" type="text" style=" width:92%;height: 24px;"/></td> 
<td>领票人</td> 
<td><input name="invoiceTaker" id="invoiceTaker" type="text" style=" width:96.5%;height: 24px;"/></td> 
</tr> 
<tr> 
<td height="30px;">税额</td> 
<td><input name="invoiceTax" id="invoiceTax" type="text" style=" width:92%;height: 24px;"/></td> 
<td>领票时间</td> 
<td> 
<input name="invoiceTakeTime" id="invoiceTakeTime" type="text" class="date textInput readonly " style=" width:86%;height: 24px;" readonly="readonly"/> 
<a class="inputDateButton" href="javascript:;">选择</a> 
</td> 
</tr> 
<tr> 
<td height="30px;">价税合计</td> 
<td> </td> 
<td>承寄商/单号</td> 
<td><input name="invoiceOddNum" id="invoiceOddNum" type="text" style=" width:96.5%;height: 24px;"/></td> 
</tr> 
</table> 
<table width="752" border="1px;" align="center" style="border-collapse:collapse;border:1px solid black;margin:auto;" id="t5"> 
<tr> 
<td width="73" height="30px;">备注</td> 
<td width="663"><input name="desc" id="desc" type="text" style=" width:99.1%;height: 24px;"/></td> 
</tr> 
</table><br/> 
<p style="left: 660px;color: red">说明：①、点击单元格"开票价合计(元)"添加行</p><br/><br/> 
<p style="left: 292px;color: red">②、点击单元格"实格合计(元)"删除行</p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p>  </p> 
</div> 
</div> 
<div class="formBar"> 
<ul> 
<li><div class="buttonActive"><div class="buttonContent"><button type="submit">提交</button></div></div></li> 
<li><div class="button"><div class="buttonContent"><button type="button" class="close">取消</button></div></div></li> 
</ul> 
</div> 
</form> 
</body> 
</html>

js实现动态添加、删除行、onkeyup表格求和示例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
关于延迟加载JavaScript
May 05 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
npm的lock机制解析
Jun 20 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
JS通过相同的name进行表格求和代码
Aug 18 #Javascript
复选框全选与全不选操作实现思路
Aug 18 #Javascript
将文本输入框内容加入表中的js代码
Aug 18 #Javascript
js css后面所带参数含义介绍
Aug 18 #Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 #Javascript
向左滚动文字 js代码效果
Aug 17 #Javascript
热点新闻滚动特效的js代码
Aug 17 #Javascript
工作总结(1972) 标语(336) 报告(147) 协议书(568) 检举信(8) 公证书(45) 口号(179) 任命书(51) 说明书(38) 党团范文(807)
You might like
?算你??的 PHP 程式大小
2006/12/06 PHP
php计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
python使用zip将list转为json的方法
2018/12/31 Python
NumPy 数组使用大全
2019/04/25 Python
python实现大文件分割与合并
2019/07/22 Python
python安装本地whl的实例步骤
2019/10/12 Python
超市实习总结自我鉴定
2013/09/19 职场文书
投资入股合作协议书
2014/10/28 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
信仰纪录片观后感
2015/06/08 职场文书
公司车辆管理制度
2015/08/04 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
MySQL RC事务隔离的实现
2022/03/31 MySQL