js实现动态添加、删除行、onkeyup表格求和示例
<%@ 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简单的表格添加行和删除行操作示例
复制代码 代码如下: <html> <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> //创建一个html元素 function $c(tagname){ return document.createElement(tagname); } //文档加载完成后要执行的内容 $(document).ready(fu
-
原生JS和JQuery动态添加、删除表格行的方法
本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
-
基于JavaScript实现动态添加删除表格的行
又一个动态控制表格的效果,用JavaScript动态生成表格行.表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能. 1.jsp <table id="viewTabs"> <thead> <tr> <th>产品名称</th> <th>编号</th> <th>数量</th> <th>重量</th> <t
-
js实现添加删除表格（两种方法）
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ margin:0 auto; background:yellow; border:4px double #808080; width:600px; text-alig
-
JS小功能(操作Table--动态添加删除表格及数据)实现代码
效果: 代码: 复制代码 代码如下: <head runat="server"> <title></title> <style type="text/css"> tr { height: 30px; } </style> <script type="text/javascript">
-
JS实现的表格操作类详解(添加，删除，排序，上移，下移)
本文实例讲述了JS实现的表格操作类.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css">*{font-size:14px}button{margin
-
动态添加删除表格行的js实现代码
复制代码 代码如下: <html><head><script language="javascript"> //窗口表格增加一行 function addNewRow(){ var tabObj=document.getElementById("myTab");//获取添加数据的表格 var rowsNum = tabObj.rows.length; //获取当前行数 var colsNum=tabObj.row
-
JS实现动态表格的添加，修改，删除功能(推荐)
1. 首先在页面中配置好一个表格框架 <tr> <td>新增参数:</td> <td class="pn-fcontent"><input type="button" value="选择" onclick="openAppParamsPage();"/></td> <td>参数列表:</td> <td class="
-
JavaScript动态操作表格实例(添加,删除行,列及单元格)
复制代码 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>js动态操作表格</title><script language="javascript">function init(){_table=document.getElementByI
-
jQuery实现的简单动态添加、删除表格功能示例
本文实例讲述了jQuery实现的简单动态添加.删除表格功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 我们</title> <style> * { padding: 0; margin: 0;
-
js实现动态添加、删除行、onkeyup表格求和示例
复制代码 代码如下: <%@ 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 "
-
jQuery给指定的table动态添加删除行的操作方法
最近写程序,碰巧有动态增加删除行的,下面就记录一下. $("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列 今天在项目中,刚好用到给指定的table添加一行.删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自
-
JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!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/
-
JQuery动态添加和删除表格行的方法
本文实例讲述了JQuery动态添加和删除表格行的方法.分享给大家供大家参考.具体分析如下: 昨天做页面表格行动态添加和删除,看了无数的介绍,发现了一个好东东,JQuery.用它实现起来还真的是很方便,这个是我用到我们平台的一个方法. 复制代码 代码如下: //记录添加行数 var areaCount=1; //记录实际表格行数 var rowCount=1; //删除模板html var delRowTemplete = "<td><a href='javascript:voi
-
JS实现动态生成html table表格的方法分析
本文实例讲述了JS实现动态生成html table表格的方法.分享给大家供大家参考,具体如下: 刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊,于是决定写个博来解救万千小伙伴于水火之中(mdzz) 首先我们要在html里面有如下代码: <table> <tbody id="tbody1"> </tbody> </table> 如果想在table里面加其他的可以随便加(
-
Js实现动态添加删除Table行示例
最近做项目遇到要动态添加.删除表格行的操作,实现如下 html代码 复制代码 代码如下: <table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> <tr > <td colspan="8" bgcolor=&qu
-
JS & JQuery 动态添加 select option
今天有朋友问我一个关于在<select>里动态添加option问题,一开始以为是JS那里动态添加,所以用了JS动态添加option的方法,但你那里是用JQuery的,所以才会一直出错,下面记下在JS和JQuery里添加option的区别. JS: var selid = document.getElementById("sltid"); for(var i=0; i<10;i++){ //循环添加多个值 sid.option[i] = new Option(i,i);
-
JS简单实现动态添加HTML标记的方法示例
本文实例讲述了JS简单实现动态添加HTML标记的方法.分享给大家供大家参考,具体如下: 一 介绍 动态添加一个HTML标记可以使用createElement()方法来实现. CreateElement()方法可以根据一个指定的类型来创建一个HTML标记. 语法: sElement=document.createElement(sName) sElement:用来接收该方法返回的一个对象. sName:用来设置HTML标记的类型和基本属性. 二 应用 动态添加一个文本框 本示例通过单击"动态添加文