隨筆 - 154 
文章 - 60 
trackbacks - 0


           
	

          

          
	
		
          
			
          
	
          
		
          <2007年12月>
          
	
          日一二三四五六
          2526272829301
          2345678
          9101112131415
          16171819202122
          23242526272829
          303112345
          

          

          
			


          
	
          聲明：
          

          
          該blog是為了收集資料，認識朋友，學習、提高技術，所以本blog的內容除非聲明，否則一律為轉載！！
          

          
感謝那些公開自己技術成果的高人們！！！
          
支持開源，尊重他人的勞動！！ 
      

          

			

          常用鏈接
          


          留言簿(3)
          




		
          隨筆分類(148)
          
		
				
			
	
		
          隨筆檔案(143)
          
		
				
			
	
		
          收藏夾(2)
          
		
				
			
	
		
          其他
          
		
				
            
			
				
          
			
	
		
          學習（技術）
          
		
				
			
	
		
          觀察思考（非技術）
          
		
				
			
	




          搜索
          

            
	
          • 
		
          •  
	
            • 

          


          最新評論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評論排行榜
          


          		
	

          

          
	
					


          
	
	http://jiarry.bokee.com/5368523.html
          

          
這是一則簡單的關于table排序，通過innerHTML互換td里的內容，從而達到排序的目的。主要是對JavaScript里innerHTML以及rowIndex以及DOM的一些應用。這個例子程序雖然簡單，并且也有其他類似效果，但該例實用性較強，應用得當，能為界面增加不少活力。（后面省略了一些過期的演示）
          

          
selectSort.html源文件如下，沒有對代碼一一說明了，又不分注釋，對稍懂js的人來說應該非常簡單。
          

          

          
          


          

          
           <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>
          

          

          

          

          
          

	
          posted on 2007-11-29 17:09 lk 閱讀(3361) 評論(8)  編輯  收藏  所屬分類: ajax&js 
          

          







          
	    
    


          
FeedBack:

          
	

		
          
			
          
			
          # re: js  table操作 --------  移動行 2007-12-07 11:25 lk
          
				
          沒人來，就自己頂一下！
          
個人修改后的代碼：
          

          

          

          <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>
          
  回復  更多評論
            
			
          
		
          
	
		
          
			
          
			
          # re: js  table操作 --------  移動行 2008-01-15 10:29 netspirit
          
				
          我剛好要用這個。可以借鑒了，非常感謝   回復  更多評論
            
			
          
		
          
	
		
          
			
          
			
          # re: js  table操作 --------  移動行 2008-06-14 08:19 好
          
				
          真的好，我最近也要用這個東東

            回復  更多評論
            
			
          
		
          
	
		
          
			
          
			
          # re: js  table操作 --------  移動行 2008-07-08 10:50 獨孤風雲
          
				
          感謝  回復  更多評論
            
			
          
		
          
	
		
          
			
          
			
          # re: js  table操作 --------  移動行[未登錄] 2009-03-12 22:07 dd
          
				
          樓主有才  回復  更多評論
            
			
          
		
          
	
		
          
			
          
			
          # re: js  table操作 --------  移動行 2009-03-14 01:10 林春彬
          
				
          我看來學這個沒有希望了，好難啊  回復  更多評論
            
			
          
		
          
	
		
          
			
          
			
          # re: js  table操作 --------  移動行[未登錄] 2009-11-20 10:13 凌寒
          
				
          太有才了，感謝啦 ！

            回復  更多評論
            
			
          
		
          
	
		
          
			
          
			
          # re: js  table操作 --------  移動行[未登錄] 2012-08-23 09:28 Scorpio
          
				
          漂亮  回復  更多評論
            
			
          
		
          
	




          








          

				
	



          



    







        
	




主站蜘蛛池模板：
潮安县|
湘潭市|
定襄县|
鄂尔多斯市|
开封县|
志丹县|
高青县|
财经|
获嘉县|
高州市|
盐边县|
西峡县|
崇明县|
库伦旗|
杂多县|
盐亭县|
天津市|
丁青县|
日照市|
定襄县|
大余县|
胶南市|
西青区|
虹口区|
仁化县|
左贡县|
冀州市|
通城县|
定安县|
大港区|
特克斯县|
巩义市|
金门县|
卫辉市|
滕州市|
淮北市|
化德县|
沿河|
高台县|
万盛区|
霞浦县|