JS 控制table上下行移动(转)
<html>
<head>
<title>lk.jsp</title>
<script type="text/javascript">
var o1,o2;
var o1a=new Array();
var o2a=new Array();
function switchTd(tr1,tr2){
for(x=0;x<o1a.length;x++){
tr1.cells[x].innerHTML=o2a[x];
tr2.cells[x].innerHTML=o1a[x];
}
tr1.cells[0].innerHTML=o1a[0];
tr2.cells[0].innerHTML=o2a[0];
clickMouse(tr2);
}
function SetRow(dir){
var o;
var start=false;
var num=0;
var v_radio = document.getElementsByName("order_radio");
for(var j=0;j<v_radio.length;j++){
if(v_radio[j].checked){
o=v_radio[j];
start=true;
num=v_radio[j].parentNode.parentNode.rowIndex;
}
}
if(!start){
alert("请选择一个选项");return;
}
if(num<=1 && dir=="up"){
alert("已经无法再向上");return;
}
if(num>=(v_radio.length) && dir=="down"){
alert("已经无法再向下");return;
}
var p = o.parentNode.parentNode;
var trs = document.getElementById("table_order").getElementsByTagName("tr");
o1=trs[p.rowIndex];
var tdLen=trs[p.rowIndex].cells.length;
o1a.length=tdLen;
o2a.length=tdLen;
for(var i=0;i<tdLen;i++){
o1a[i]=trs[p.rowIndex].cells[i].innerHTML;
if(dir=="down"){
o2a[i]=trs[p.rowIndex+1].cells[i].innerHTML;
}else{
o2a[i]=trs[p.rowIndex-1].cells[i].innerHTML;
}
}
if(dir=="down"){
o2=trs[p.rowIndex+1];
}else{
o2=trs[p.rowIndex-1];
}
switchTd(o1,o2);
}
var v_tr = null;
function onMouse(obj){
if(obj.cells[obj.cells.length-1].childNodes[0].checked==false){
obj.bgColor="#E6E6FA";
}
}
function outMouse(obj){
if(obj.cells[obj.cells.length-1].childNodes[0].checked==false){
obj.bgColor="";
}
}
function clickMouse(obj){
obj.cells[obj.cells.length-1].childNodes[0].checked=true;
obj.bgColor="#D8BFD8";
if(v_tr!=null&&v_tr!=obj){
v_tr.bgColor="";
}
v_tr = obj;
}
</script>
</head>
<body>
<form name="form_order" action="lk_test.jsp" method="post">
<table>
<tr>
<td>
<table border="1" name="table_order" id="table_order" >
<tr bgcolor="#9F9Fc0">
<td>序号</td>
<td>项目名称</td>
<td>请选择</td>
</tr>
<tr onmouseover="onMouse(this);" onmouseout="outMouse(this);" onclick="clickMouse(this);">
<td>1<input type="hidden" name="orderid" value="1"/></td>
<td>姓名<input type="hidden" name="dbid" value="1"></td>
<td><input type="radio" name="order_radio" id="order_radio"/></td>
</tr>
<tr onmouseover="onMouse(this);" onmouseout="outMouse(this);" onclick="clickMouse(this);">
<td>2<input type="hidden" name="orderid" value="2"/></td>
<td>性别<input type="hidden" name="dbid" value="2"></td>
<td><input type="radio" name="order_radio" id="order_radio"/></td>
</tr>
<tr onmouseover="onMouse(this);" onmouseout="outMouse(this);" onclick="clickMouse(this);">
<td>3<input type="hidden" name="orderid" value="3"/></td>
<td>E-MAIL<input type="hidden" name="dbid" value="6"></td>
<td><input type="radio" name="order_radio" id="order_radio"/></td>
</tr>
<tr onmouseover="onMouse(this);" onmouseout="outMouse(this);" onclick="clickMouse(this);">
<td>4<input type="hidden" name="orderid" value="4"/></td>
<td>手机<input type="hidden" name="dbid" value="3"></td>
<td><input type="radio" name="order_radio" id="order_radio"/></td>
</tr>
<tr onmouseover="onMouse(this);" onmouseout="outMouse(this);" onclick="clickMouse(this);">
<td>5<input type="hidden" name="orderid" value="5"/></td>
<td>电话<input type="hidden" name="dbid" value="4"></td>
<td><input type="radio" name="order_radio" id="order_radio"/></td>
</tr>
<tr onmouseover="onMouse(this);" onmouseout="outMouse(this);" onclick="clickMouse(this);">
<td>6<input type="hidden" name="orderid" value="6"/></td>
<td>家庭住址<input type="hidden" name="dbid" value="5"></td>
<td><input type="radio" name="order_radio" id="order_radio"/></td>
</tr>
<tr onmouseover="onMouse(this);" onmouseout="outMouse(this);" onclick="clickMouse(this);">
<td>7<input type="hidden" name="orderid" value="7"/></td>
<td>邮编<input type="hidden" name="dbid" value="7"></td>
<td><input type="radio" name="order_radio" id="order_radio"/></td>
</tr>
</table>
</td>
<td>
<input type="button" value="↑向上移动 " onclick="SetRow('up');"/><br>
<input type="button" value="↓向下移动 " onclick="SetRow('down');"/>
</td>
</tr>
</table>
<br><br>
<input type="submit" value=" 提交修改 "/>
</form>
</body>
</html>
感谢原创作者 http://www.blogjava.net/lcs/archive/2007/11/29/164043.html