动态添加、删除行想必大家并不陌生,下面为大家介绍通过 js 是如何实现的,有此需求的朋友可不要错过了哈
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <%@ 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>
来源: