js實(shí)現(xiàn)動(dòng)態(tài)添加、刪除行、onkeyup表格求和示例
更新時(shí)間：2013年08月18日 16:08:20 作者：
動(dòng)態(tài)添加、刪除行想必大家并不陌生，下面為大家介紹通過js是如何實(shí)現(xiàn)的，有此需求的朋友可不要錯(cuò)過了哈
復(fù)制代碼 代碼如下:
<%@ 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>發(fā)貨申請(qǐng)</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"));//每一個(gè)的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("已經(jīng)剩下最后一行，不能刪除！");
}
}
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">申請(qǐng)人:
<input name="fullName" id="fullName" type="text" value="${user.fullName }" disabled="true" />
</td>
<td width="100" align="left">區(qū)域:
<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">申請(qǐng)日期:
<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">業(yè)務(wù)類型：
<input type="radio" name="serviceId" id="" value="0" checked="checked"/>即發(fā)
<input type="radio" name="serviceId" id="" value="1"/>即發(fā)即開
<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">申請(qǐng)發(fā)貨明細(xì)</td>
<td width="82" rowspan="2" height="40px;">產(chǎn)品名稱</td>
<td width="65" rowspan="2">規(guī)格</td>
<td colspan="2">數(shù)量</td>
<td colspan="2">單價(jià)</td>
<td colspan="2">結(jié)算貸款</td>
</tr>
<tr>
<td width="54">盒/瓶</td>
<td width="53">件</td>
<td width="56">實(shí)價(jià)(元)</td>
<td width="63">開票價(jià)(元)</td>
<td width="72" onclick="deleteRow()">實(shí)價(jià)合計(jì)(元)</td>
<td width="85" onclick="addRow()">開票價(jià)合計(jì)(元)</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 >合計(jì)</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;">結(jié)算/付款方式</td>
<td colspan="7">
<input type="radio" name="pay" id="" checked="checked" value="0"/>對(duì)公
<input type="radio" name="pay" id="" value="1"/>對(duì)私
<input type="radio" name="pay" id="" value="2"/>非現(xiàn)
</td>
</tr>
<tr>
<td rowspan="3">發(fā)貨資料</td>
<td width="68" height="18px;">發(fā)貨方式</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">發(fā)貨始限</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">聯(lián)系方式</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;">總經(jīng)理室</td>
<td colspan="2">市場(chǎng)部</td>
<td colspan="3">所在區(qū)域</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;">以下由市場(chǎng)部/財(cái)務(wù)部填寫</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;">入賬時(shí)間</td>
<td width="179">入賬銀行 賬號(hào)/卡號(hào)</td>
<td width="85">入賬金額</td>
<td colspan="2">經(jīng)辦人</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">發(fā)運(yùn)情況</td>
<td width="80" height="30px;">發(fā)運(yùn)時(shí)間</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">經(jīng)辦人</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">《內(nèi)部發(fā)貨單》號(hào)碼</td>
</tr>
<tr>
<td height="30px;">承運(yùn)單位</td>
<td><input name="sendUnit" id="sendUnit" type="text" style=" width:96%;height: 24px;"/></td>
<td>運(yùn)單號(hào)碼</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">申請(qǐng)開票事項(xiàng)</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;">單位稅號(hào)</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>賬號(hào)</td>
<td><input name="acctNum" id="acctNum" type="text" style=" width:96.5%;height: 24px;"/></td>
</tr>
<tr>
<td rowspan="4">發(fā)票開具領(lǐng)用情況</td>
<td height="30px;">開票時(shí)間</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>發(fā)票號(hào)碼</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>領(lǐng)票人</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>領(lǐng)票時(shí)間</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;">價(jià)稅合計(jì)</td>
<td> </td>
<td>承寄商/單號(hào)</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">說明：①、點(diǎn)擊單元格"開票價(jià)合計(jì)(元)"添加行</p><br/><br/>
<p style="left: 292px;color: red">②、點(diǎn)擊單元格"實(shí)格合計(jì)(元)"刪除行</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>
相關(guān)文章
JavaScript實(shí)現(xiàn)數(shù)字格式化的示例詳解
在處理數(shù)字時(shí),為了提高可讀性,我們通常會(huì)將整數(shù)部分的數(shù)字以千分位或百分位分隔,本文將詳細(xì)介紹如何使用JavaScript來實(shí)現(xiàn)數(shù)字的千分位和百分位分隔,需要的可以參考下2024-04-04
今天小編就為大家分享一篇Layer+Echarts構(gòu)建彈出層折線圖的方法，具有很的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js實(shí)現(xiàn)驗(yàn)證碼干擾（靜態(tài)）
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)驗(yàn)證碼干擾，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
CryptoJS中AES實(shí)現(xiàn)前后端通用加解密技術(shù)
這篇文章主要為大家詳細(xì)介紹了CryptoJS中AES實(shí)現(xiàn)前后端通用加解密技術(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
一個(gè)檢測(cè)表單數(shù)據(jù)的JavaScript實(shí)例
這篇文章主要介紹了一個(gè)檢測(cè)表單數(shù)據(jù)的JavaScript實(shí)例，很簡(jiǎn)單，很實(shí)用，比較適合初學(xué)者2014-10-10
javascript中undefined與null的區(qū)別
在JavaScript中存在這樣兩種原始類型:Null與Undefined。這兩種類型常常會(huì)使JavaScript的開發(fā)人員產(chǎn)生疑惑，在什么時(shí)候是Null，什么時(shí)候又是Undefined?2015-08-08
小程序云開發(fā)實(shí)戰(zhàn)小結(jié)
這篇文章主要介紹了小程序云開發(fā)實(shí)戰(zhàn)小結(jié)，本文詳細(xì)的介紹了云開發(fā)以及環(huán)境的搭建和項(xiàng)目實(shí)踐，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
可以用來運(yùn)行代碼的函數(shù)，跟本網(wǎng)站的都差不多。2009-05-05
echarts-for-weixin是ECharts官方維護(hù)的一個(gè)開源項(xiàng)目，提供了一個(gè)微信小程序組件，可以通過這個(gè)組件在微信小程序中使用?ECharts?繪制圖表。本文將通過示例詳解微信小程序使用ECharts的方法，感興趣的可以了解一下2022-06-06
這篇文章主要介紹了Javascript寫入txt和讀取txt文件的方法,需要的朋友可以參考下2014-02-02