表格中的上移和下移

最新推荐文章于 2024-05-14 13:47:57 发布

原创最新推荐文章于 2024-05-14 13:47:57 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

struts2 同时被 3 个专栏收录

15 篇文章

订阅专栏

9 篇文章

订阅专栏

JSP页面

5 篇文章

订阅专栏

<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="cache" uri="/cacheTag"%>
<%
	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">
		<script type="text/javascript">
//删除一行
function deleteRow(eve) {
if (confirm("确认删除")) {
element = window.event ? window.event.srcElement : eve.target;
var rowNo = element.parentNode.parentNode.rowIndex;
var tbody = document.getElementById("tbody");
tbody.deleteRow(rowNo - 1);
}
}

//设置选中行的背景色
var currentActiveRow;
function changeActiveRow() {
eve = arguments[0];
element = window.event ? window.event.srcElement : eve.target;
obj = element.parentNode;
while (obj && obj.tagName != "TR") {
obj = obj.parentNode;
}
if (currentActiveRow)
currentActiveRow.style.backgroundColor = "";
currentActiveRow = obj;
currentActiveRow.style.backgroundColor = "Blue";
}

////////////////
///移动行
////////////////
function cleanWhitespace(element) {
//遍历element的子节点
for (var i = 0; i < element.childNodes.length; i++) {
var node = element.childNodes[i]
if (node.nodeType == 3 && !/\s/.test(node.nodue))
node.parentNode.removeChild(node);
}
}

//使表格行上移，接收参数为链接对象
function moveUp(_a) {
//获得表格对象
var _table = document.getElementById("tbody");
cleanWhitespace(_table);
//通过链接对象获取表格行的引用
//var _row = _a.parentNode.parentNode;
var _row = currentActiveRow;

//如果不是第一行 交换顺序
if (_row.previousSibling)
swapNode(_row, _row.previousSibling);
}

//使表格行下移 接收参数为链接对象
function moveDown(_a) {
//获得表格对象
var _table = document.getElementById("tbody");
cleanWhitespace(_table);

//通过链接对象获取表格行的引用
//var _row = _a.parentNode.parentNode;
var _row = currentActiveRow;

//如果不是最后一行 则与下一行交换顺序
if (_row.nextSibling)
swapNode(_row, _row.nextSibling);
}

//定义通用的函数交换两个节点的位置
function swapNode(node1, node2) {
//获取父节点
var _parent = node1.parentNode;
//获取两个节点的相应位置
var _t1 = node1.nextSibling;
var _t2 = node2.nextSibling;
//将node2插入到原来node1的位置
if (_t1)
_parent.insertBefore(node2, _t1);
else
_parent.appendChild(node2);
//将node1插入到原来ndoe2的位置
if (_t2)
_parent.insertBefore(node1, _t2);
else
_parent.appendChild(node1);
}
      </script>
	</head>
	<body>
		<table width="96%" align="center" class="condition">
			<caption>Web支付渠道</caption>
			<thead id="thead">
				<tr onclick="changeActiveRow(this);">
					<td align="center" width="24%">
						渠道名称
					</td>
					<td align="center" width="24%">
						代收类型
					</td>
					<td align="center" width="24%">
						是否分账
					</td>
					<td align="center" width="24%">
						操作
					</td>
				</tr>
			</thead>
			<tbody id="tbody">
			</tbody>
		</table>
		<table width="96%" align="center" class="condition">
			<caption>终端支付渠道</caption>
			<thead id="thead">
				<tr onclick="changeActiveRow(this);">
					<td align="center" width="24%">
						渠道名称
					</td>
					<td align="center" width="24%">
						代收类型
					</td>
					<td align="center" width="24%">
						是否分账
					</td>
					<td align="center" width="24%">
						操作
					</td>
				</tr>
			</thead>
			<tbody id="tcbody">
			</tbody>
		</table>
	</body>
</html>

引用的页面为：

<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@taglib uri="/dttag" prefix="dt"%>
<%@taglib prefix="cache" uri="/cacheTag"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<base href="<%=basePath%> ">
		<title>平台注册主页面</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<dt:comppath></dt:comppath>
		<script type="text/javascript">
  jQuery(function(){
		var form = $("#platformRegisterForm")[0];
		$("#btnOK").bind('click', function(event) {
			addPlatUserInfo();
		});
		$("#btnCancle").bind('click', function(event) {
			window.location.href= "<%=path%>/Home.action";
		});
		$("#btnReset").bind('click', function(event) {
		//删除列表
		var theTable = document.getElementById("tbody");
		while(theTable.hasChildNodes()){
			theTable.removeChild(theTable.lastChild);
		}
		//删除终端列表
		var thecTable = document.getElementById("tcbody");
		while(thecTable.hasChildNodes()){
			thecTable.removeChild(thecTable.lastChild);
		}
			form.reset();
		});
		
		$("#moveUp1").bind('click', function(event) {
			moveUp();
		});
		$("#moveDown1").bind('click', function(event) {
			moveDown();
		});
		$("#selectPayChannel1").bind('click', function(event) {
			payChannel();
		});
	});
	
	var dealAccess = false;
	function dealAccessClick(selected){
		if(selected == true){
			dealAccess = true;
		}else{
			dealAccess = false;
		}
	}
	function checked(){
		 var mobileregx=/^[1][358]\d{9}$/;
         var mailregx=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
         var new_mobileNbr=dt$.obj("#new_mobileNbr").val();
         var new_email=dt$.obj("#new_email" ).val();
         if(new_mobileNbr != "" && !mobileregx.test(new_mobileNbr)){
            dt$.warn("联系电话格式不正确");
            return false;
         }
        if(new_email !="" && !mailregx.test(new_email)) {
           dt$.warn("电子邮箱格式不正确");
           return false;
         }
		if(!dealAccess){
			dt$.warn("请您选择是否同意注册协议");
	         return false;
		}
		var tbody = document.getElementById("tbody");
		var tcbody = document.getElementById("tcbody");
		var rowNo = tbody.rows.length;
		var rowcNo = tcbody.rows.length;
		if(((rowNo-0)+(rowcNo-0))==0){
		 dt$.warn("请您至少选择一种支付渠道");
	           return false;
		}
		return true;
	}
	//增加平台用户信息
	function addPlatUserInfo(){
		var url = "common/PayCenterRegisterAction!addPlatUser.action";
		var params = $("#platformRegisterForm").serialize();
		if (dt$.validate('#platformRegisterForm')&&checked()) {
				var urlname = "<%=path%>/common/PayCenterRegisterAction!checkLoginName.action"+"?registerTVO.loginName="+$('#centerUserLoginName').val();
             dt$.ajaxPost(urlname,"", function(data){
                 if (data!="SUCCESS") {
                        dt$.warn("登录用户名已存在", null, function() {});
                        return false;
                  }else{
                    var param = $('#platformRegisterForm' ).serialize();
                        dt$.ajaxPost(url,param, function(data){
                              if (data!="SUCCESS") {
                                     dt$.warn("操作失败", null, function() {
                                          window.location.href= "<%=path%>/Home.action";
                                     });
                               }else{
                                     dt$.success("注册成功,请等待管理员审核", null,function (){
                                     	window.location.href= "<%=path%>/Home.action";
                                     });
                               }
                        } );   
                  }
           }); 
         }     

	}
	//选择支付渠道
	function payChannel(){
		    var url = "<%=path%>/common/PayChannelAction!showMain.action?useType=B";
	        var resultWindow = window.showModalDialog(url,window,"dialogWidth=900px;dialogHeight=500px;");
			if(resultWindow == null){return;}
			//删除列表
			var theTable = document.getElementById("tbody");
			while(theTable.hasChildNodes()){
			theTable.removeChild(theTable.lastChild);
			}
			//删除终端列表
			var thecTable = document.getElementById("tcbody");
			while(thecTable.hasChildNodes()){
			thecTable.removeChild(thecTable.lastChild);
			}
		for(var k=0;k<resultWindow.length;k++){
		var tbody = document.getElementById("tbody");
		var tcbody = document.getElementById("tcbody");
		var rowNo = tbody.rows.length;
		var rowcNo = tcbody.rows.length;
		var isLedgerLabel ;//是否支持分账
		var proxyServiceTypeLabel;//是否代收
		if(resultWindow[k].proxyServiceType == 'N'){
			proxyServiceTypeLabel = '不代收';
		}else if(resultWindow[k].proxyServiceType == 'R'){
			proxyServiceTypeLabel = '瑞德代收';
		}else{
			proxyServiceTypeLabel = '业务平台代收';
		}
		if(resultWindow[k].isNeedLedger == 'true'){
			isNeedLedgerLabel = '是';
		}else{
			isNeedLedgerLabel = '否';
		}
		if(resultWindow[k].payType == 'W'){
			tbody.insertRow(rowNo);
			tbody.rows[rowNo].insertCell(0);
			tbody.rows[rowNo].cells[0].innerHTML = '<s:label value="'+resultWindow[k].payChannelName +'"></s:label>'
				+'<input type="hidden" name="registerTVO.payChannelName" value="'+resultWindow[k].payChannelName +'"/>'
				+'<input type="hidden" name="registerTVO.payChannelId" value="'+resultWindow[k].payChannelId +'"/>'
				+'<input type="hidden" name="registerTVO.payCodeW" value="'+resultWindow[k].payCode +'"/>'
				+'<input type="hidden" name="registerTVO.ledgerListDoc" value="'+resultWindow[k].ledgerList +'"/>'
				+'<input type="hidden" name="registerTVO.payCode" value="'+resultWindow[k].payCode +'"/>'
				+'<input type="hidden" name="registerTVO.payChannelPartnerId" value="'+resultWindow[k].payChannelPartnerId +'"/>'
				+'<input type="hidden" name="registerTVO.payChannelPartnerKey" value="'+resultWindow[k].payChannelPartnerKey +'"/>'
				+'<input type="hidden" name="registerTVO.ext1" value="'+resultWindow[k].ext1 +'"/>';
			tbody.rows[rowNo].insertCell(1);
			tbody.rows[rowNo].cells[1].innerHTML = '<s:label name="payChannelList.proxyServiceType" value="'+proxyServiceTypeLabel +'"></s:label>'
				+'<input type="hidden" name="registerTVO.proxyServiceType" value="'+resultWindow[k].proxyServiceType +'"/>';
			tbody.rows[rowNo].insertCell(2);
			tbody.rows[rowNo].cells[2].innerHTML = '<s:label name="payChannelList.payChannel.partnerId" value="'+isNeedLedgerLabel +'"></s:label>'
				+'<input type="hidden" name="registerTVO.isNeedLedger" value="'+resultWindow[k].isNeedLedger +'"/>';
			tbody.rows[rowNo].insertCell(3);
			tbody.rows[rowNo].cells[3].innerHTML = "<input type='button' value='删除' onclick='deleteRow(event)'/>";
			tbody.rows[rowNo].onclick = changeActiveRow;
		}else{
			tcbody.insertRow(rowcNo);
			tcbody.rows[rowcNo].insertCell(0);
			tcbody.rows[rowcNo].cells[0].innerHTML = '<s:label value="'+resultWindow[k].payChannelName +'"></s:label>'
				+'<input type="hidden" name="registerTVO.payChannelName" value="'+resultWindow[k].payChannelName +'"/>'
				+'<input type="hidden" name="registerTVO.payChannelId" value="'+resultWindow[k].payChannelId +'"/>'
				+'<input type="hidden" name="registerTVO.payCodeC" value="'+resultWindow[k].payCode +'"/>'
				+'<input type="hidden" name="registerTVO.ledgerListDoc" value="'+resultWindow[k].ledgerList +'"/>'
				+'<input type="hidden" name="registerTVO.payCode" value="'+resultWindow[k].payCode +'"/>'
				+'<input type="hidden" name="registerTVO.payChannelPartnerId" value="'+resultWindow[k].payChannelPartnerId +'"/>'
				+'<input type="hidden" name="registerTVO.payChannelPartnerKey" value="'+resultWindow[k].payChannelPartnerKey +'"/>'
				+'<input type="hidden" name="registerTVO.ext1" value="'+resultWindow[k].ext1 +'"/>';
			tcbody.rows[rowcNo].insertCell(1);
			tcbody.rows[rowcNo].cells[1].innerHTML = '<s:label name="payChannelList.proxyServiceType" value="'+proxyServiceTypeLabel +'"></s:label>'
				+'<input type="hidden" name="registerTVO.proxyServiceType" value="'+resultWindow[k].proxyServiceType +'"/>';
			tcbody.rows[rowcNo].insertCell(2);
			tcbody.rows[rowcNo].cells[2].innerHTML = '<s:label name="payChannelList.payChannel.partnerId" value="'+isNeedLedgerLabel +'"></s:label>'
				+'<input type="hidden" name="registerTVO.isNeedLedger" value="'+resultWindow[k].isNeedLedger +'"/>';
			tcbody.rows[rowcNo].insertCell(3);
			tcbody.rows[rowcNo].cells[3].innerHTML = "<input type='button' value='删除' onclick='deleteRow(event)'/>";
			tcbody.rows[rowcNo].onclick = changeActiveRow;
			}
		}
	}
     </script>
	</head>
	<body>
		<form id="platformRegisterForm" method="post">
			<table width="96%" align="center" class="condition">
				<tr>
					<th>
						平台名称：
					</th>
					<td>
						<s:token></s:token>
						<dt:input id="registeTypeId" name="registerTVO.gucode"
							inputType="hidden" value="0"></dt:input>
						<dt:input id="ownerTypeId" name="registerTVO.ownerType"
							inputType="hidden" value="B"></dt:input>
						<dt:input id="businessPlatformName"
							name="registerTVO.businessPlatformName" required="true"
							prompt="平台名称" length="32"></dt:input>
					</td>
					<th width="10%" align="left">
						登录名称：
					</th>
					<td>
						<dt:input id="centerUserLoginName" name="registerTVO.loginName" required="true" prompt="登录名称"
							length="20"></dt:input>
					</td>
				</tr>
				<tr>
					<th>
						联系电话：
					</th>
					<td>
						<dt:input id="new_mobileNbr" name="registerTVO.teleNo"
							required="true" prompt="联系电话" length="11"></dt:input>
					</td>
					<th>
						邮箱：
					</th>
					<td>
						<dt:input id="new_email" name="registerTVO.email"
							required="true" prompt="邮箱"></dt:input>
					</td>
				</tr>
				<tr>
					<th>
						平台描述：
					</th>
					<td>
						<dt:input id="businessPlatformDesc"
							name="registerTVO.businessPlatformDesc" required="true"
							prompt="平台名称" length="128"></dt:input>
					</td>
					<th>
						回调地址：
					</th>
					<td>
						<dt:input id="expendAddress" name="registerTVO.expendAddress"
							required="true" prompt="回调地址" length="128"></dt:input>
					</td>
				</tr>
				<tr>
					<th>
						支付渠道：
					</th>
					<td>
						<dt:button id="selectPayChannel1" label="选择支付渠道"></dt:button>
						<dt:button id="moveUp1" label="上移"></dt:button>
						<dt:button id="moveDown1" label="下移"></dt:button>
					</td>
				</tr>
			</table>
			<div id="payChannelShow1">
				<s:include value="/pages/common/payChannelShowList.jsp"></s:include>
			</div>
		</form>
		<div align="center">
			<s:checkbox name="dealAccess" value="false"
				onclick="dealAccessClick(this.checked);"></s:checkbox>
			<s:label id="dealAccessLabel" value="同意《XXXX》协议"></s:label>
		</div>
		<div align="center">
			<dt:button id="btnOK" label="确定"></dt:button>
			<dt:button id="btnCancle" label="取消"></dt:button>
			<dt:button id="btnReset" label="重置"></dt:button>
		</div>
	</body>
</html>

其中的dt标签可以用struts标签代替。