TR 互换

最新推荐文章于 2021-02-27 20:38:09 发布

iteye_7399

最新推荐文章于 2021-02-27 20:38:09 发布

阅读量247

点赞数

分类专栏： java 文章标签： java 工作

java 专栏收录该内容

137 篇文章 0 订阅

订阅专栏

由于页面功能需要，刚刚写了个简易的tr互换功能，随笔记录一下。

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"><html><head><title> new document </title><style type="text/css">body table tr th {	background-color:#f60;	font-size:12px;	width:100px;	height:25px;	line-height:25xp;}body table tr td {	font-size:12px;	text-align:center;}</style><script language="javascript">var contents = {	error : "移动按钮异常",	ico_top : "↑",	ico_bottom : "↓",	button_top : "<input type=\"button\" value=\"↑\" onclick=\"trmove(this)\">",	button_bottom : "<input type=\"button\" value=\"↓\" onclick=\"trmove(this)\">"}var trmove = function(obj) {	var thistr = obj.parentnode.parentnode;	var toptr = thistr.previoussibling;	var bottomtr = thistr.nextsibling;	if(obj.value == contents.ico_top) {		thistr.swapnode(toptr);	} else if(obj.value == contents.ico_bottom) {		thistr.swapnode(bottomtr);	} else {		alert(contents.error);	}	tabhide(1);}var tabhide = function(start) {	var tab = document.getelementbyid("tab");	var trs = tab.firstchild.childnodes;	var firsttr = trs[start];	var lastertr = trs[trs.length - 1];	for(var i = start + 1; i < trs.length; i++) {		trs[i].childnodes[1].innerhtml = contents.button_top;		trs[i].childnodes[2].innerhtml = contents.button_bottom;	}	firsttr.childnodes[1].innerhtml = "x";	lastertr.childnodes[2].innerhtml = "x";}</script></head><body><table id="tab" border="1" cellpadding="0" cellspacing="0">	<tr>		<th>行数</th>		<th colspan="2">操作</th>	</tr>	<tr>		<td>第1行</td>		<td><input type="button" value="↑" onclick="trmove(this)"></td>		<td><input type="button" value="↓" onclick="trmove(this)"></td>	</tr>	<tr>		<td>第2行</td>		<td><input type="button" value="↑" onclick="trmove(this)"></td>		<td><input type="button" value="↓" onclick="trmove(this)"></td>	</tr>	<tr>		<td>第3行</td>		<td><input type="button" value="↑" onclick="trmove(this)"></td>		<td><input type="button" value="↓" onclick="trmove(this)"></td>	</tr>	<tr>		<td>第4行</td>		<td><input type="button" value="↑" onclick="trmove(this)"></td>		<td><input type="button" value="↓" onclick="trmove(this)"></td>	</tr>	<tr>		<td>第5行</td>		<td><input type="button" value="↑" onclick="trmove(this)"></td>		<td><input type="button" value="↓" onclick="trmove(this)"></td>	</tr></table><script language="javascript">tabhide(1)</script></body></html>