js實現動態添加、刪除行、onkeyup表格求和示例

2024-05-06 15:50:49

字體：大中小

來源：轉載

供稿：網友

動態添加、刪除行想必大家并不陌生，下面為大家介紹通過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><c:forEach items='${productIdNames}' var='p'><option value='${p.productId }'>${p.commName }</option></c:forEach></select>";
var b1="<select><c:forEach items='${typeInfos }' var='ti'><option value='${ti.typeId }'> ${ti.typeName }</option></c:forEach> </select>";
var c1 = "<select><option value='0'> 盒</option><option value='1'> 瓶</option></select>";
var d1="<input onkeyup='sum(this.id)' type='text' value='0' />";
var e1='<input onkeyup="sum(this.id)" type="text" value="0"/>';
var f1='<input onkeyup="sum(this.id)" type="text" value="0"/>';
var g1='<input type="text" value="0" />';
var h1="<input type='text' 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 method="post" action="${basePath}/sale/deliverSaleApply" onsubmit="return validateCallback(this,navTabAjaxDone)">
<div layoutH="56">
<div>
<table>
<tr>
<td>申請人:
<input type="text" value="${user.fullName }" disabled="true" />
</td>
<td>區域:
<select >
<c:forEach items="${areaTypes}" var="a">
<option value="${a.areaId}">${a.areaName }</option>
</c:forEach>
</select>
</td>
<td>申請日期:
<input type="text" readonly="readonly"/>
<a href="javascript:;">選擇</a>
</td>
<td>業務類型：
<input type="radio" value="0" checked="checked"/>即發
<input type="radio" value="1"/>即發即開
<input type="radio" value="2"/>其他
</td>
</tr>
</table>
<table>
<tr>
<td>收貨單位全稱</td>
<td><input type="text"/></td>
</tr>
</table>
<table>
<tr>
<td rowspan="80">申請發貨明細</td>
<td rowspan="2">產品名稱</td>
<td rowspan="2">規格</td>
<td colspan="2">數量</td>
<td colspan="2">單價</td>
<td colspan="2">結算貸款</td>
</tr>
<tr>
<td>盒/瓶</td>
<td>件</td>
<td>實價(元)</td>
<td>開票價(元)</td>
<td>實價合計(元)</td>
<td>開票價合計(元)</td>
</tr>
<tr>
<td>
<select>
<c:forEach items="${productIdNames}" var="p">
<option value="${p.productId }">${p.commName }</option>
</c:forEach>
</select>
</td>
<td>
<select>
<c:forEach items="${typeInfos }" var="ti">
<option value="${ti.typeId }"> ${ti.typeName }</option>
</c:forEach>
</select>
</td>
<td>
<select>
<option value="0"> 盒</option>
<option value="1"> 瓶</option>
</select>
</td>
<td><input type="text" value="0" onkeyup="sum(this.id)"/></td>
<td><input type="text" value="0" onkeyup="sum(this.id)"/></td>
<td><input type="text" value="0" onkeyup="sum(this.id)"/></td>
<td><input type="text" value="0" /></td>
<td><input type="text" value="0" /></td>
</tr>
<tr>
<td >合計</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table>
<tr>
<td>結算/付款方式</td>
<td colspan="7">
<input type="radio" checked="checked" value="0"/>對公
<input type="radio" value="1"/>對私
<input type="radio" value="2"/>非現
</td>
</tr>
<tr>
<td rowspan="3">發貨資料</td>
<td>發貨方式</td>
<td>
<select>
<option value="0">郵政</option>
<option value="1">申通</option>
<option value="2">其他</option>
</select></td>
<td>發貨始限</td>
<td> <input type="text" readonly="readonly"/>
<a href="javascript:;">選擇</a></td>
<td colspan="3">
<input type="radio" checked="checked" value="0"/>普通件
<input type="radio" value="1"/>急件
</td>
</tr>
<tr>
<td>收貨地址</td>
<td colspan="6"><input type="text"/></td>
</tr>
<tr>
<td>到站</td>
<td><input type="text"/></td>
<td>收貨人</td>
<td><input type="text"/></td>
<td>聯系方式</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td rowspan="2" >審批</td>
<td colspan="2">總經理室</td>
<td colspan="2">市場部</td>
<td colspan="3">所在區域</td>
</tr>
<tr>
<td colspan="2">
<input type="radio" checked="checked" value="0"/>不同意
<input type="radio" value="1" disabled="true"/>同意
</td>
<td colspan="2">
<input type="radio" checked="checked" value="0"/>不同意
<input type="radio" value="1" disabled="true"/>同意
</td>
<td colspan="3">
<input type="radio" checked="checked" value="0"/>不同意
<input type="radio" value="1" disabled="true"/>同意
</td>
</tr>
</table>
<table>
<tr>
<td>以下由市場部/財務部填寫</td>
</tr>
</table>
<table>
<tr>
<td rowspan="4">貸款給付情況</td>
<td>入賬時間</td>
<td>入賬銀行賬號/卡號</td>
<td>入賬金額</td>
<td colspan="2">經辦人</td>
</tr>
<tr>
<td><input type="text" readonly="readonly"/>
<a href="javascript:;">選擇</a></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input disabled="true" type="text" value="${user.fullName}"/></td>
</tr>
</table>
<table>
<tr>
<td rowspan="2">發運情況</td>
<td>發運時間</td>
<td>
<input type="text" readonly="readonly"/>
<a href="javascript:;">選擇</a>
</td>
<td>經辦人</td>
<td><input disabled="true" type="text" value="${user.fullName}"/></td>
<td>《內部發貨單》號碼</td>
</tr>
<tr>
<td>承運單位</td>
<td><input type="text"/></td>
<td>運單號碼</td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
</table>
<table>
<tr>
<td rowspan="4">申請開票事項</td>
<td >客戶(收票)全稱</td>
<td colspan="4"><input type="text"/></td>
</tr>
<tr>
<td>單位地址</td>
<td colspan="4"><input type="text"/></td>
</tr>
<tr>
<td>單位稅號</td>
<td colspan="2"><input type="text"/></td>
<td>電話</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>開戶銀行</td>
<td colspan="2"><input type="text"/></td>
<td>賬號</td>
<td><input type="text"/></td>
</tr>
<tr>
<td rowspan="4">發票開具領用情況</td>
<td>開票時間</td>
<td colspan="2"><input type="text" readonly="readonly"/>
<a href="javascript:;">選擇</a></td>
<td>發票號碼</td>
<td><input type="text"/></td>
</tr>
<tr>
<td rowspan="3">開票款額</td>
<td>金額</td>
<td><input type="text"/></td>
<td>領票人</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>稅額</td>
<td><input type="text"/></td>
<td>領票時間</td>
<td>
<input type="text" readonly="readonly"/>
<a href="javascript:;">選擇</a>
</td>
</tr>
<tr>
<td>價稅合計</td>
<td> </td>
<td>承寄商/單號</td>
<td><input type="text"/></td>
</tr>
</table>
<table>
<tr>
<td>備注</td>
<td><input type="text"/></td>
</tr>
</table><br/>
<p>說明：①、點擊單元格"開票價合計(元)"添加行</p><br/><br/>
<p>②、點擊單元格"實格合計(元)"刪除行</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div>
<ul>
<li><div><div><button type="submit">提交</button></div></div></li>
<li><div><div><button type="button">取消</button></div></div></li>
</ul>
</div>
</form>
</body>
</html>