1. 首页
  2. 编程与技术

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

发布于 2017-01-10 01:03:25 | 112 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程，程序狗速度看过来！

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

动态添加、删除行想必大家并不陌生，下面为大家介绍通过js是如何实现的，有此需求的朋友可不要错过了哈
 
<%@ 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>


最新网友评论  共有(0)条评论 发布评论 返回顶部
推荐阅读
  • 终极炫富——2016 年 iOS 开发者收入调查报告
  • 年度大片：Stack Overflow 2017 开发者调查报告发布！
  • 开发者需要大学学位吗？
  • 程序员多大年纪算高龄，届时该何去何从？
  • 2017 年高薪编程语言排行榜，你的语言上榜没？
  • 各编程语言开发者最常使用的按键，中了没?
  • 伤不起的三十岁，干不动的程序员要何去何从？
  • 2016年中国加班最狠IT公司排行
  • 一句话"面试"漫画：黑了苹果、谷歌、三星
  • 拿代码量算 KPI ……跟程序员们来这套？
  • 程序员遇到 Bug 时的 30 个反应，你是哪一种？
  • 2016年收入最高的5个编程语言 Java和C没在前五?
  • 为什么很少见人傻钱多的程序员炫富？
  • 阿里月薪两万是什么体验？
  • 代码缩进时 程序员更喜欢空格键还是Tab键？
    • 最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务