jsp表格添加行刪除行以及校驗行

<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
	<head>
		<base href="<%=basePath%> ">
		<title>選擇分賬列表</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="<%=basePath%>/css/func.css"
			type="text/css" charset="utf-8" />
		<link rel="stylesheet" href="<%=basePath%>/css/func.cache.css"
			type="text/css" charset="utf-8" />
		<script type="text/javascript">
	//添加一行
	function add() {
		var tledgerbody = document.getElementById("tledgerbody");
		var rowNo = tledgerbody.rows.length;
		tledgerbody.insertRow(rowNo);
		tledgerbody.rows[rowNo].insertCell(0);
		tledgerbody.rows[rowNo].cells[0].innerHTML = "<input name='ledgerUserName' type='text'></input>";
		tledgerbody.rows[rowNo].insertCell(1);
		tledgerbody.rows[rowNo].cells[1].innerHTML = "<input name='ledgerAccount' type='text'></input>";
		tledgerbody.rows[rowNo].insertCell(2);
		tledgerbody.rows[rowNo].cells[2].innerHTML = "<input name='ledgerRule' type='text'></input>%";
		tledgerbody.rows[rowNo].insertCell(3);
		tledgerbody.rows[rowNo].cells[3].innerHTML =  "<input type='button' value='刪除' οnclick='deleteRow(event)'/>";
	}
	function addCancel(){
		window.returnValue = "";
		window.close();
	}
	function addOver(){
			var tledgerbody = document.getElementById("tledgerbody");
			var rowNo = tledgerbody.rows.length;
			var ledgerUserName = document.getElementsByName("ledgerUserName");
			var ledgerAccount = document.getElementsByName("ledgerAccount");
			var ledgerRule = document.getElementsByName("ledgerRule");
			var ledgerRuleSum = 0;
			var ledgerUserNameStr  = "";
			var ledgerAccountStr  = "";
			var ledgerRuleStr  = "";
			if(rowNo < 2){
			alert("至少有兩項分賬");
			return;
		}
		for(var i = 0;i<rowNo;i++){
			if(isNull(ledgerUserName[i].value)){
				alert("第"+(i+1)+"行分賬用戶名不能爲空");
				return;
			}
			if(isNull(ledgerAccount[i].value)){
				alert("第"+(i+1)+"行分賬賬號不能爲空");
				return;
			}
			if(isNull(ledgerRule[i].value)){
				alert("第"+(i+1)+"行分賬規則不能爲空");
				return;
			}
			if((ledgerRule[i].value - 0)<=0){
				alert("第"+(i+1)+"行分賬規則不能爲負數或零");
				return;
			}
			ledgerRuleSum +=ledgerRule[i].value-0;
			if(i == 0){
				ledgerUserNameStr = ledgerUserName[i].value;
				ledgerAccountStr = ledgerAccount[i].value;
				ledgerRuleStr = (ledgerRule[i].value-0)/100.00;
			}else{
				ledgerUserNameStr = ledgerUserNameStr+"%_%"+ledgerUserName[i].value;
				ledgerAccountStr = ledgerAccountStr+"%_%"+ledgerAccount[i].value;
				ledgerRuleStr =ledgerRuleStr +"%_%"+(ledgerRule[i].value - 0)/100.00;
			}
		}
		if(document.getElementById("proxyType").value == 'N'){
			if((ledgerRuleSum-0) != 100){
					alert("不代收時分賬規則之和應等於100%,請檢查分賬規則");
					return;
				}
		}else{
			if((ledgerRuleSum-0) > 100){
				alert("分賬規則之和應小於等於100%,請檢查分賬規則");
				return;
			}
		}
		window.returnValue = ledgerUserNameStr+"@"+ledgerAccountStr+"@"+ledgerRuleStr;
		window.close();
	}
	//判斷非空
	function isNull(o) {
	    if (null == o || "" == o || o.replace(/^\s*$/, "") == "") {
	          return true ;
	       } else {
	      return false ;
	      }
	   }

	//刪除一行
	function deleteRow(eve) {
		if (confirm("確認刪除")) {
			element = window.event ? window.event.srcElement : eve.target;
			var rowNo = element.parentNode.parentNode.rowIndex;
			var tbody = document.getElementById("tledgerbody");
			tbody.deleteRow(rowNo - 1);
		}
	}

</script>
</head>

	<body>
		<table width="96%" align="center" class="condition">
			<caption>選擇分賬列表</caption>
			<thead id="thead">
				<tr>
					<td>
						分賬用戶名
						<input id="proxyType" type="hidden" name="useType" value="<s:property value='useType'/>"/>
					</td>
					<td>
						分賬賬號
					</td>
					<td>
						分賬規則(百分制)
					</td>
					<td>
						操作
					</td>
				</tr>
			</thead>
			<tbody id="tledgerbody">
			</tbody>
		</table>
		<div align="center">
		<button οnclick="add()" value="添加分賬用戶">
			添加分賬用戶
		</button>
		<button οnclick="addOver()" value="添加完成">
			添加完成
		</button>
		<button οnclick="addCancel()" value="取消">
			取消
		</button>
		</div>
	</body>
</html>

發佈了25 篇原創文章 · 獲贊 19 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章