首页
所有分类
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 相关文章推荐
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
详解AngularJS Filter（过滤器）用法
Dec 28 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
详谈Angular 2+ 的表单（一）之模板驱动型表单
Apr 25 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
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
原神(1) 大话西游(1) 战锤40K(1) 铁拳(1) AGC(1) 吸血鬼(1) 绿林侠盗(1) 遗弃(1) 模拟人生(1) 死亡搁浅(1)
You might like
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
JavaScript全局函数使用简单说明
2011/03/11 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
微信小程序 图片等比例缩放（图片自适应屏幕）
2016/11/16 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
Three.js基础学习教程
2017/11/16 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
Python编程中的反模式实例分析
2014/12/08 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
pandas 时间格式转换的实现
2019/07/06 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
如何使用Pytorch搭建模型
2020/10/26 Python
跑鞋、网球鞋、网球拍、服装及装备：Holabird Sports
2016/09/19 全球购物
联想台湾官网：Lenovo TW
2018/05/09 全球购物
澳大利亚个性化儿童礼品网站：Bright Star Kids
2019/06/14 全球购物
应用服务器有那些
2012/01/19 面试题
公司年会晚宴演讲稿
2014/01/06 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang