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>

　　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 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>

　　<td style="width:180px; height:20px; vertical-align: middle">申请人:

　　</td>

　　<td width="100" align="left">区域:

　　<c:forEach items="${areaTypes}" var="a">

　　<option value="${a.areaId}">${a.areaName }</option>

　　</c:forEach>

　　</select>

　　</td>

　　<td width="180" align="left">申请日期:

　　</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>

　　<tr>

　　<td width="121" height="18px;">收货单位全称</td>

　　</tr>

　　</table>

　　<tr>

　　<td width="54" rowspan="80">申请发货明细</td>

　　</tr>

　　<tr>

　　<td width="85" onclick="addRow()">开票价合计(元)</td>

　　</tr>

　　<c:forEach items="${productIdNames}" var="p">

　　<option value="${p.productId }">${p.commName }</option>

　　</c:forEach>

　　</select>

　　</td>

　　<td>

　　<c:forEach items="${typeInfos }" var="ti">

　　<option value="${ti.typeId }"> ${ti.typeName }</option>

　　</c:forEach>

　　</select>

　　</td>

　　<td>

　　</select>

　　</td>

　　</tr>

　　<tr>

　　</tr>

　　</table>

　　<tr>

　　<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>

　　</select></td>

　　<input type="radio" name="priorityFlag" id="common" checked="checked" value="0"/>普通件

　　<input type="radio" name="priorityFlag" id="urgency" value="1"/>急件

　　</td>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　<input type="radio" id="" name="approvalTwo" checked="checked" value="0"/>不同意

　　<input type="radio" id="" name="approvalTwo" value="1" disabled="true"/>同意

　　</td>

　　<input type="radio" id="" name="approvalOne" checked="checked" value="0"/>不同意

　　<input type="radio" id="" name="approvalOne" value="1" disabled="true"/>同意

　　</td>

　　<input type="radio" id="" name="approvalThree" checked="checked" value="0"/>不同意

　　<input type="radio" id="" name="approvalThree" value="1" disabled="true"/>同意

　　</td>

　　</tr>

　　</table>

　　<tr>

　　<td width="398" height="30px;">以下由市场部/财务部填写</td>

　　</tr>

　　</table>

　　<tr>

　　<td width="96" rowspan="4">贷款给付情况</td>

　　<td width="179">入账银行账号/卡号</td>

　　</tr>

　　<tr>

　　</tr>

　　</table>

　　<tr>

　　</td>

　　<td width="170">《内部发货单》号码</td>

　　</tr>

　　<tr>

　　</tr>

　　</table>

　　<tr>

　　<td width="219" rowspan="4">申请开票事项</td>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　<td rowspan="4">发票开具领用情况</td>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　<td>

　　</td>

　　</tr>

　　<tr>

　　</tr>

　　</table>

　　<tr>

　　</tr>

　　</table><br/>

　　<p style="left: 660px;color: red">说明：①、点击单元格"开票价合计(元)"添加行</p><br/><br/>

　　<p style="left: 292px;color: red">②、点击单元格"实格合计(元)"删除行</p>

　　</div>

　　<ul>

　　</ul>

　　</div>

　　</form>

　　</body>

　　</html>

教程首页更多教程