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 a1 = "<select id='productId' name='productId'><c:forEach items='${productIdNames}' var='p'><option value='${p.productId }'>${p.commName }</option></c:forEach></select>";

var b1="<select id='typeName' name='typeName'><c:forEach items='${typeInfos }' var='ti'><option value='${ti.typeId }'> ${ti.typeName }</option></c:forEach> </select>";

var c1 = "<select id='' name=''><option value='0'> 盒</option><option value='1'> 瓶</option></select>";

var d1="<input onkeyup='sum(this.id)' name='productNeedNum' id='productNeedNum' type='text' value='0' />";

var e1='<input onkeyup="sum(this.id)" name="realPrice" id="realPrice" type="text" value="0"/>';

var f1='<input onkeyup="sum(this.id)" name="ticketPrice" id="ticketPrice" type="text" value="0"/>';

var g1='<input name="totalRealPrice" id="totalRealPrice" type="text" value="0" />';

var h1="<input name='totalTicketPrice' id='totalTicketPrice' 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>

<div>

<td>申请人:

</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>业务类型：

<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">开票价合计(元)</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>说明：①、点击单元格"开票价合计(元)"添加行</p><br/><br/>

<p>②、点击单元格"实格合计(元)"删除行</p>

<p></p>

</div>

<div>

<ul>

</ul>

</div>

</form>

</body>

</html>