js table操作 -------- 移动行

  < style >
 .tr{background-color:red}
  </ style >  
   < body >
  < div  id =info > &nbsp; </ div >
     < center >
< script  type ="text/javascript" >
var o1,o2,str1,str2,num1,num2;
var o1a=new Array();
var o2a=new Array();

function switchTd(tr1,tr2,num){ 
 for(x=0;x<o1a.length;x++){  
  tr1.cells[x].innerHTML=o2a[x];
  tr1.cells[0].innerHTML=o1a[0];
  tr2.cells[x].innerHTML=o1a[x];
   tr2.cells[0].innerHTML=o2a[0];  
  tr1.cells[2].childNodes[0].name="p"+o1a[0]; 
  tr2.cells[2].childNodes[0].name="p"+o2a[0];  
 
  }
    
 tr2.className="tr";
 tr1.className="";
 //alert(num+" "+tr1.cells[2].parentNode.innerHTML+"|"+tr2.cells[2].parentNode.innerHTML);
 //alert(tr2.cells[1].childNodes[0].checked);
 //document.listform.listTd[num].checked=true;//在opera下也起作用，但ff下不行;
 
 if(tr2.cells[1].childNodes[0])tr2.cells[1].childNodes[0].checked=true;//选中被替换的radio,IE下会自动默认;
  
 document.title=tr1.cells[2].childNodes[0].name+" name:value "+tr1.cells[2].childNodes[0].value+" *** "+tr2.cells[2].childNodes[0].name+" name:value "+tr2.cells[2].childNodes[0].value;
;
  document.getElementById("info").innerHTML=tr1.cells[2].childNodes[0].name+" name:value "+tr1.cells[2].childNodes[0].value+" *** "+tr2.cells[2].childNodes[0].name+" name:value "+tr2.cells[2].childNodes[0].value;
;
}

/*
Author:jarry
E-mail:jarryli@gmail.com
MSN:jiarry@hotmail.com
Copyright@http://jiarry.blogchina.com http://jiarry.126.com
Modified date:June 2006
All right reserved!
*/
/*
document.onclick=show;
 function show(){
  var o=document.listform.listTd;
   for(var j=0;j<document.listform.listTd.length;j++){
    if(document.listform.listTd[j].checked)
    {
    
      alert(j+", "+document.listform.listTd[j].parentNode.parentNode.innerHTML);
    
    }
  }   
 }
 */
 function SetRow(dir){
 var o;
 var start=false;
 var num=0;

 for(var j=0;j<document.listform.listTd.length;j++){
    if(document.listform.listTd[j].checked)
    {
    //alert(document.listform.listTd[j].parentNode.parentNode.innerHTML);
    o=document.listform.listTd[j];
    start=true;
    //num=j;//这样得到的j在firefox下有问题；很怪;只好用下面的方法了;
    //alert(document.listform.listTd[j].parentNode.parentNode.cells[0].innerHTML);
    //num=parseInt(document.listform.listTd[j].parentNode.parentNode.cells[0].innerHTML);//没有办法，只好通过这种方法来的到值了;

     //alert(document.listform.listTd[j].parentNode.parentNode.rowIndex);
     num=document.listform.listTd[j].parentNode.parentNode.rowIndex;
    }
  }
 
 alert(document.listform.listTd.length+" "+num);
 
 if(!start)
 {
  alert("请选择一个选项");return;
  }
 if(num<=1 && dir=="up")
 {
  alert("已经无法再向上");return;
 } 
 if(num>=(document.listform.listTd.length) && dir=="down")
 {
  alert("已经无法再向下");return;
 }
 
 //alert(num+":"+(document.listform.listTd.length-1));
 


 var p = o.parentNode.parentNode;
 //var oldIndex=o.parentNode.parentNode.rowIndex;
 //alert(o.parentNode.parentNode.parentNode.rows[oldIndex].innerHTML)

 var trs = document.getElementById("listTable").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;
      //trs[p.rowIndex+1].cells[1].childNodes[0].checked=true;
      }
   else{
     o2a[i]=trs[p.rowIndex-1].cells[i].innerHTML;
      //trs[p.rowIndex-1].cells[1].childNodes[0].checked=true;
     }
  }
 if(dir=="down"){
   o2=trs[p.rowIndex+1];
  // num=num+1;
 }else{
   o2=trs[p.rowIndex-1];
  // num=num-1;
 }

  switchTd(o1,o2,num);

}
/*
function switchTd1(tr1,tr2){ 
 //alert(tr1.cells[2].childNodes[0].name)
 //alert(o2a[2].childNodes[0].value);
 for(x=0;x<o1a.length;x++){  
  tr1.cells[x].innerHTML=o2a[x];
  tr1.cells[0].innerHTML=o1a[0];
  //tr2.cells[x].innerHTML=o1a[x];
 // tr2.cells[0].innerHTML=o2a[0];
 // tr1.cells[1].childNodes[0].checked=true;  
  //alert(o1a[0]+"||"+o2a[0]);
  //alert(tr2.cells[1].childNodes[0].name+""+tr1.cells[1].childNodes[0].name);  
 // tr1.cells[2].childNodes[0].name="p"+o1a[0]; 
  //tr2.cells[2].childNodes[0].name="p"+o2a[0];  
  }
  
 tr1.className="tr";
 tr2.className="";  
 //var trs = document.getElementById("listTable").getElementsByTagName("tr");
 //alert(o1a[2]+"||"+o2a[2]);
 //alert(trs[0].innerHTML+""+trs[1].innerHTML)
 //document.title=tr1.cells[2].childNodes[0].name+" name:value "+tr1.cells[2].childNodes[0].value+" *** "+tr2.cells[2].childNodes[0].name+" name:value "+tr2.cells[2].childNodes[0].value;
;
}
*/
/*
function insertTd(ftd,otd){ 
 alert(o1.innerHTML+""+o2.innerHTML);
 for(x=0;x<ftd.cells.length;x++){  
  otd.cells[x].innerHTML=o1.cells[x].innerHTML;
  ftd.cells[x].innerHTML=o2.cells[x].innerHTML;
  }
 
}
*/

 /*
 var str1 = trs[p.rowIndex].innerHTML;
 var str2 = trs[p.rowIndex+1].innerHTML;
 
 //var cp = p.cloneNode(true);
 //document.getElementById("listTable").insertBefore(cp, trs[p.rowIndex + 1]);
// document.getElementById("listTable").insertRow[p.rowIndex].appendChild(str1);
// document.getElementById("listTable").insertBefore(trs[p.rowIndex+1], trs[p.rowIndex]);
//document.getElementById("listTable").appendChild();
 
 //alert(str1+"||"+str2+"|"+p+"|"+p.rowIndex);
 //alert(trs[p.rowIndex].cells[1].innerHTML)
// insertTd(trs[p.rowIndex],o2);
// insertTd(trs[p.rowIndex],trs[p.rowIndex+1]);
 //trs[3].innerHTML=str2;
 //alert(trs[p.rowIndex].innerHTML)// = str2;
 //alert(p.rowIndex)
 //trs[p.rowIndex + 1].innerHTML = str1;
 */

  </ script >< form  name ="listform"  action ="" >
  < table  width =""  border ="0"  cellspacing ="0"  cellpadding ="0" >
   < tr >
     < td  >< table  width ="100%"  border ="0"  cellspacing ="1"  cellpadding ="0"  id ="listTable"  bgcolor ="#D57501" >
   < tr  align ="center"  bgcolor ="#FFFFFF" >
     < td  height ="24" > 排名 </ td >
     < td  width =100 > 选择 </ td >
     < td > 您认为金牌总数的排名将是？ </ td >
   </ tr >
   < tr  align ="center"  bgcolor ="#FFFFFF"  id ="1" >
     < td > 1 </ td >
     < td >< input  name ="listTd"  type ="radio"  value ="radiobutton"  id ="radio1" ></ td >
     < td >< input  name ="p1"  type ="hidden"  value ="中国" >
      中国 </ td >
   </ tr >
   < tr  align ="center"  bgcolor ="#FFFFFF" >
     < td > 2 </ td >
     < td >< input  name ="listTd"  type ="radio"  value ="radiobutton"  id ="radio2" ></ td >
     < td >< input  type ="hidden"  name ="p2"  value ="美国" >
      美国 </ td >
   </ tr >
   < tr  align ="center"  bgcolor ="#FFFFFF"  id ="3" >
     < td > 3 </ td >
     < td >< input  name ="listTd"  type ="radio"  value ="radiobutton"  id ="radio3" ></ td >
     < td >< input  type ="hidden"  name ="p3"  value ="俄罗斯" >
      俄罗斯 </ td >
   </ tr >
   < tr  align ="center"  bgcolor ="#FFFFFF" >
     < td > 4 </ td >
     < td >< input  name ="listTd"  type ="radio"  value ="radiobutton"  id ="radio4" ></ td >
     < td >< input  type ="hidden"  name ="p4"  value ="法 国" >
      法 国 </ td >
   </ tr >
   < tr  align ="center"  bgcolor ="#FFFFFF" >
     < td > 5 </ td >
     < td >< input  name ="listTd"  type ="radio"  value ="radiobutton"  id ="radio5" ></ td >
     < td >< input  type ="hidden"  name ="p5"  value ="德 国" >
      德 国 </ td >
   </ tr >
   < tr  align ="center"  bgcolor ="#FFFFFF" >
     < td > 6 </ td >
     < td >< input  name ="listTd"  type ="radio"  value ="radiobutton"  id ="radio6" ></ td >
     < td >< input  type ="hidden"  name ="p6"  value ="英 国" >
      英 国 </ td >
   </ tr >
   < tr  align ="center"  bgcolor ="#FFFFFF" >
     < td > 7 </ td >
     < td >< input  name ="listTd"  type ="radio"  value ="radiobutton"  id ="radio7" ></ td >
     < td >< input  type ="hidden"  name ="p7"  value ="日 本" >
      日 本 </ td >
   </ tr >
   < tr  align ="center"  bgcolor ="#FFFFFF" >
     < td > 8 </ td >
     < td >< input  name ="listTd"  type ="radio"  value ="radiobutton"  id ="radio8" ></ td >
     < td >< input  type ="hidden"  name ="p8"  value ="韩 国" >
      韩 国 </ td >
   </ tr >
   < tr  align ="center"  bgcolor ="#FFFFFF" >
     < td > 9 </ td >
     < td >< input  name ="listTd"  type ="radio"  value ="radiobutton"  id ="radio9" ></ td >
     < td >< input  type ="hidden"  name ="p9"  value ="瑞 典" >
      瑞 典 </ td >
   </ tr >
   < tr  align ="center"  bgcolor ="#FFFFFF" >
     < td > 10 </ td >
     < td >< input  name ="listTd"  type ="radio"  value ="radiobutton"  id ="radio10" ></ td >
     < td >< input  type ="hidden"  name ="p10"  value ="西班牙" >
      西班牙 </ td >
   </ tr >
   < tr  align ="center"  bgcolor ="#FFFFFF" >
     < td > 11 </ td >
     < td >< input  name ="listTd"  type ="radio"  value ="radiobutton"  id ="radio10" ></ td >
     < td >< input  type ="hidden"  name ="p10"  value ="澳大利亚" >
      澳大利亚 </ td >
   </ tr >
</ table ></ td >
     < td  width ="322"  valign ="top" >< a  href ="javascript:SetRow('up');"  class ="btlink2"   onclick ="" > ↑向上移动 </ a >< div  style ="margin-top:10px" >< a  href ="javascript:SetRow('down');"  class ="btlink"  onclick ="" > ↓向下移动 </ a ></ div ></ td >
   </ tr >
</ table >
< script  type ="text/javascript" >


var s=0,first;
var lt=document.forms["listform"].listTd;
while(s<lt.length){
 lt[s].onclick=function(){   
     if(this.checked){
        setbg(this);
     } 
 }
 lt[s].parentNode.parentNode.cells[1].onclick=function(){
 //如果点击了radio的td;
   this.childNodes[0].checked=true;
   setbg(this.childNodes[0]);
 }
  lt[s].parentNode.parentNode.cells[1].onmouseover=function(){
    this.bgColor="red";
  }
   lt[s].parentNode.parentNode.cells[1].onmouseout=function(){
    this.bgColor="";
  }
 s++;
}
var trs = document.getElementById("listTable").getElementsByTagName("tr");

function setbg(obj){
  //alert(obj.parentNode.parentNode.innerHTML);
  /*
  var first = trs[1];
  first.className="";
  first = obj.parentNode.parentNode;
  first.className="tr";*/
  var t=1;
  while(t<trs.length){
  se=obj.parentNode.parentNode;
  if(trs[t]!=se)trs[t].className="";
  se.className="tr";
  t++;
  }
}
</ script >
</ form >