js 控制 table 上下行移动

<html>
  
<head>    
    
<title>lk.jsptitle>
    
<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

转载于:https://www.cnblogs.com/Feng-Scorpio/archive/2012/08/23/2651889.html

你可能感兴趣的:(js 控制 table 上下行移动)