哪位JS高手帮我写一下代码
<style type="text/css">table {border-collapse:collapse;width:80%;text-align:center;}th {background:#eee;}th,td {line-height:25px;}th,td {border-bottom:1px solid #ccc;}</style><form method="post"><table> <tr><th>编号</th><th>导航名</th><th>导航说明</th><th>操作</th><th>排序</th></tr> <tr> <input type="hidden" value="1" name="sort" /> <td>1</td> <td>导航1</td> <td>导航说明1</td> <td><a href="?action=update&id=1">修改</a> | <a href="?action=delete&id=1">删除</a></td> <td><input type="submit" value="向上" /><input type="submit" value="向下" /></td> </tr> <tr> <input type="hidden" value="2" name="sort" /> <td>2</td> <td>导航2</td> <td>导航说明2</td> <td><a href="?action=update&id=1">修改</a> | <a href="?action=delete&id=1">删除</a></td> <td><input type="submit" value="向上" /><input type="submit" value="向下" /></td> </tr> <tr> <input type="hidden" value="1" name="sort" /> <td>3</td> <td>导航3</td> <td>导航说明3</td> <td><a href="?action=update&id=1">修改</a> | <a href="?action=delete&id=1">删除</a></td> <td><input type="submit" value="向上" /><input type="submit" value="向下" /></td> </tr> <tr><td colspan="6"><input type="submit" value="提交" name="send" /><td></tr></table></form> 展开
慢了一步~不过既然写了，就给你啦~
测试页面在附件里。
js部分代码如下：
function foSort(sortId,direction){
var sid=parseInt(sortId);
var ot=document.getElementById("DHlist");
if (sid<1 || sid>ot.rows.length-2){return false;}
var nsid=direction.toLowerCase()=="up"? (sid<=1? ot.rows.length-2:sid-1):(sid+1>ot.rows.length-2? 1:sid+1);
var svs=document.getElementsByName("sort");
//替换sort的input的value--start--
//看你的需要了，如果是要随着上下一起移动，可以把这一段注释掉
var tsv=svs[sid-1].value; //这里转换为0开头的索引，sort的input比表格少2行，分别是开头和结尾
svs[sid-1].value=svs[nsid-1].value;
svs[nsid-1].value=tsv;
//---end--
//还原编号列---start---
//如果要求编号也一起山下移动，可把此段注释掉
var tid=ot.rows[sid].cells[0].innerHTML;
ot.rows[sid].cells[0].innerHTML=ot.rows[nsid].cells[0].innerHTML;
ot.rows[nsid].cells[0].innerHTML=tid;
//--end---
//上下切换--start----
var tr=ot.rows[sid].innerHTML;
ot.rows[sid].innerHTML=ot.rows[nsid].innerHTML;
ot.rows[nsid].innerHTML=tr;
//---end---
}完整HTML+js代码：
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head><body>
<style type="text/css">
table {border-collapse:collapse;
width:80%;
text-align:center;
}
th {
background:#eee;
}
th,td {
line-height:25px;
}
th,td {
border-bottom:1px solid #ccc;
}
</style>
<form method="post">
<table id="DHlist">
<tr><th>编号</th><th>导航名</th><th>导航说明</th><th>操作</th><th>排序</th></tr>
<tr>
<input type="hidden" value="1" name="sort" />
<td>1</td>
<td>导航1</td>
<td>导航说明1</td>
<td><a href="?action=update&id=1">修改</a> | <a href="?action=delete&id=1">删除</a></td>
<td><input type="button" onClick="foSort(this.parentNode.parentNode.cells[0].innerHTML,'up')"value="向上" /><input type="button" onClick="foSort(this.parentNode.parentNode.cells[0].innerHTML,'down')"value="向下" /></td>
</tr>
<tr>
<input type="hidden" value="2" name="sort" />
<td>2</td>
<td>导航2</td>
<td>导航说明2</td>
<td><a href="?action=update&id=1">修改</a> | <a href="?action=delete&id=1">删除</a></td>
<td><input type="button" onClick="foSort(this.parentNode.parentNode.cells[0].innerHTML,'up')"value="向上" /><input type="button" onClick="foSort(this.parentNode.parentNode.cells[0].innerHTML,'down')"value="向下" /></td>
</tr>
<tr>
<input type="hidden" value="3" name="sort" />
<td>3</td>
<td>导航3</td>
<td>导航说明3</td>
<td><a href="?action=update&id=3">修改</a> | <a href="?action=delete&id=1">删除</a></td>
<td><input type="button" onClick="foSort(this.parentNode.parentNode.cells[0].innerHTML,'up')"value="向上" /><input type="button" onClick="foSort(this.parentNode.parentNode.cells[0].innerHTML,'down')"value="向下" /></td>
</tr>
<tr><td colspan="6"><input type="submit" value="提交" name="send" /><td></tr>
</table>
</form>
<script type="text/javascript">
function foSort(sortId,direction){
var sid=parseInt(sortId);
var ot=document.getElementById("DHlist");
if (sid<1 || sid>ot.rows.length-2){return false;}
var nsid=direction.toLowerCase()=="up"? (sid<=1? ot.rows.length-2:sid-1):(sid+1>ot.rows.length-2? 1:sid+1);
var svs=document.getElementsByName("sort");
//替换sort的input的value--start--
//看你的需要了，如果是要随着上下一起移动，可以把这一段注释掉
var tsv=svs[sid-1].value; //这里转换为0开头的索引，sort的input比表格少2行，分别是开头和结尾
svs[sid-1].value=svs[nsid-1].value;
svs[nsid-1].value=tsv;
//---end--
//还原编号列---start---
//如果要求编号也一起山下移动，可把此段注释掉
var tid=ot.rows[sid].cells[0].innerHTML;
ot.rows[sid].cells[0].innerHTML=ot.rows[nsid].cells[0].innerHTML;
ot.rows[nsid].cells[0].innerHTML=tid;
//--end---
//上下切换--start----
var tr=ot.rows[sid].innerHTML;
ot.rows[sid].innerHTML=ot.rows[nsid].innerHTML;
ot.rows[nsid].innerHTML=tr;
//---end---
}
</script>
</body>
</html>
<head>
<title>test</title>
<style type="text/css">
table {border-collapse:collapse;
width:80%;
text-align:center;
}
th {
background:#eee;
}
th,td {
line-height:25px;
}
th,td {
border-bottom:1px solid #ccc;
}
</style>
</head>
<body>
<form method="post">
<table>
<tr><th>编号</th><th>导航名</th><th>导航说明</th><th>操作</th><th>排序</th></tr>
<tr id='1'>
<input type="hidden" value="1" name="sort" />
<td>1</td>
<td>导航1</td>
<td>导航说明1</td>
<td><a href="?action=update&id=1">修改</a> | <a href="?action=delete&id=1">删除</a></td>
<td><input type="button" value="向上" name='up' /><input type="button" value="向下" name='down'/></td>
</tr>
<tr id='2'>
<input type="hidden" value="2" name="sort" />
<td>2</td>
<td>导航2</td>
<td>导航说明2</td>
<td><a href="?action=update&id=1">修改</a> | <a href="?action=delete&id=1">删除</a></td>
<td><input type="button" value="向上"name='up' /><input type="button" value="向下" name='down' /></td>
</tr>
<tr id='3'>
<input type="hidden" value="3" name="sort" />
<td>3</td>
<td>导航3</td>
<td>导航说明3</td>
<td><a href="?action=update&id=1">修改</a> | <a href="?action=delete&id=1">删除</a></td>
<td><input type="button" value="向上"name='up'/><input type="button" value="向下" name='down' /></td>
</tr>
<tr><td colspan="6"><input type="button" value="提交" name="send" /><td></tr>
</table>
</form>
</body>
</html>
<script>
var arrup=document.getElementsByName('up');
var arrdown=document.getElementsByName('down');
for(i=0;i<arrup.length;i++)
arrup[i].onclick=function(e){evt=e||window.event;
target=evt.srcElement||evt.target;
switch(target){
case arrup[0]:alert('no');break;
case arrup[1]:swap(arrup[1],1);break;
case arrup[2]:swap(arrup[2],1);break;
}
};
for (i=0;i<arrdown.length;i++)
arrdown[i].onclick=function(e){
evt=e||window.event;
target=evt.srcElement||evt.target;
switch(target){
case arrdown[0]:swap(arrdown[0],2);break;
case arrdown[1]:swap(arrdown[1],2);break;
case arrdown[2]:alert('no');break;
}
};
function swap(elem,flag){
objsrc=elem.parentNode.parentNode;
objtarget='';
if(flag==1)objtarget=objsrc.previousElementSibling;else objtarget=objsrc.nextElementSibling;//up;
{
var arr=new Array(),temp='';
for(i=0;i<objtarget.childNodes.length-2;i++)
{arr[i]=objtarget.childNodes[i].innerHTML;
objtarget.childNodes[i].innerHTML=objsrc.childNodes[i].innerHTML;
objsrc.childNodes[i].innerHTML=arr[i];}
}
}
</script>
chrome 下测试通过！看你能不能看得懂了！
