我想实现在table中tr tr可以互换，就是有按钮上下可以移动 然后点保存就可以更新数据库怎么操作

Question

如题

Answer 1

我给你一个例子。。我项目中用到的
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[1].innerHTML=o1a[1];
  tr2.cells[x].innerHTML=o1a[x];
   tr2.cells[1].innerHTML=o2a[1];  
  
 
  }
    } function SetRow(dir){
 var o;
 var start=false;
 var num=0; for(var j=0;j<document.getElementsByName("listTd").length;j++){    if(document.getElementsByName("listTd")[j].checked)
    {
   
    o=document.getElementsByName("listTd")[j];
    start=true;
    num=document.getElementsByName("listTd")[j].parentNode.parentNode.rowIndex;
    }
  }
 
  if(!start)
 {
  alert("请选择一个选项");return;
  }
 if(num<=1 && dir=="up")
 {
  alert("已经无法再向上");return;
 } 
 if(num>=(document.getElementsByName("listTd").length) && dir=="down")
 {
  alert("已经无法再向下");return;
 }
 
  var p = o.parentNode.parentNode;
 //alert("p="+p.innerHTML)
 //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]; 
 //alert("01="+o1.innerHTML)
 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;
 }
 //  alert(o1+","+o2+","+num)
  switchTd(o1,o2,num);
 
 
 }
 //alert(document.listform.listTd.length+" "+num);
 
 //选择td的时候 控制
 var s=0,first;
var lt=document.getElementsByName("listTd");
while(s<lt.length){
 lt[s].onclick=function(){   
     if(this.checked){
       // setbg(this);
     } 
 }
 lt[s].parentNode.parentNode.cells[0].onclick=function(){
 //如果点击了radio的td;
   this.childNodes[0].checked=true;
  // setbg(this.childNodes[0]);
 }
  lt[s].parentNode.parentNode.cells[0].onmouseover=function(){
    this.bgColor="yellow";
  }
   lt[s].parentNode.parentNode.cells[0].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++;
  }
}
//保存排序
function dosave(form){
var gzdmArr=document.getElementsByName("listTd");
var gzdm="";
for(var j=0;j<gzdmArr.length;j++)
{
gzdm+=gzdmArr[j].value+";"}
form.action="/pages/system/fzgz_update.do?gzdm="+gzdm;
form.submit();}