隨筆 - 154  文章 - 60  trackbacks - 0
          <2007年12月>
          2526272829301
          2345678
          9101112131415
          16171819202122
          23242526272829
          303112345

          聲明:

          該blog是為了收集資料,認(rèn)識(shí)朋友,學(xué)習(xí)、提高技術(shù),所以本blog的內(nèi)容除非聲明,否則一律為轉(zhuǎn)載!!

          感謝那些公開(kāi)自己技術(shù)成果的高人們!!!

          支持開(kāi)源,尊重他人的勞動(dòng)!!

          常用鏈接

          留言簿(3)

          隨筆分類(148)

          隨筆檔案(143)

          收藏夾(2)

          其他

          學(xué)習(xí)(技術(shù))

          觀察思考(非技術(shù))

          搜索

          •  

          最新評(píng)論

          閱讀排行榜

          評(píng)論排行榜

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

          這是一則簡(jiǎn)單的關(guān)于table排序,通過(guò)innerHTML互換td里的內(nèi)容,從而達(dá)到排序的目的。主要是對(duì)JavaScript里innerHTML以及rowIndex以及DOM的一些應(yīng)用。這個(gè)例子程序雖然簡(jiǎn)單,并且也有其他類似效果,但該例實(shí)用性較強(qiáng),應(yīng)用得當(dāng),能為界面增加不少活力。(后面省略了一些過(guò)期的演示)

          selectSort.html源文件如下,沒(méi)有對(duì)代碼一一說(shuō)明了,又不分注釋,對(duì)稍懂js的人來(lái)說(shuō)應(yīng)該非常簡(jiǎn)單。




           
          <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下會(huì)自動(dòng)默認(rèn);
            
           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下有問(wèn)題;很怪;只好用下面的方法了;
              //alert(document.listform.listTd[j].parentNode.parentNode.cells[0].innerHTML);
              //num=parseInt(document.listform.listTd[j].parentNode.parentNode.cells[0].innerHTML);//沒(méi)有辦法,只好通過(guò)這種方法來(lái)的到值了;

               
          //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(
          "請(qǐng)選擇一個(gè)選項(xiàng)");return;
            }

           
          if(num<=1 && dir=="up")
           
          {
            alert(
          "已經(jīng)無(wú)法再向上");return;
           }
           
           
          if(num>=(document.listform.listTd.length) && dir=="down")
           
          {
            alert(
          "已經(jīng)無(wú)法再向下");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>您認(rèn)為金牌總數(shù)的排名將是?</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="中國(guó)">
                中國(guó)
          </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="美國(guó)">
                美國(guó)
          </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="法 國(guó)">
                法 國(guó)
          </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="德 國(guó)">
                德 國(guó)
          </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="英 國(guó)">
                英 國(guó)
          </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="韓 國(guó)">
                韓 國(guó)
          </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"><href="javascript:SetRow('up');" class="btlink2"  onclick="">↑向上移動(dòng)</a><div style="margin-top:10px"><href="javascript:SetRow('down');" class="btlink" onclick="">↓向下移動(dòng)</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(){
           
          //如果點(diǎn)擊了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) 評(píng)論(8)  編輯  收藏 所屬分類: ajax&js

          FeedBack:
          # re: js table操作 -------- 移動(dòng)行 2007-12-07 11:25 lk

          沒(méi)人來(lái),就自己頂一下!
          個(gè)人修改后的代碼:

          <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(
          "請(qǐng)選擇一個(gè)選項(xiàng)");return;
               }

               
          if(num<=1 && dir=="up"){
                alert(
          "已經(jīng)無(wú)法再向上");return;
               }
           
               
          if(num>=(v_radio.length) && dir=="down"){
                alert(
          "已經(jīng)無(wú)法再向下");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>序號(hào)</td>
                  
          <td>項(xiàng)目名稱</td>
                  
          <td>請(qǐng)選擇</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>手機(jī)<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="↑向上移動(dòng) "  onclick="SetRow('up');"/><br>
              
          <input type="button" value="↓向下移動(dòng) "  onclick="SetRow('down');"/>    
              
          </td>
              
          </tr>      
              
          </table>            
              
          <br><br>    
              
          <input type="submit" value=" 提交修改 "/>
              
          </form>    
            
          </body> 
          </html>
            回復(fù)  更多評(píng)論
            
          # re: js table操作 -------- 移動(dòng)行 2008-01-15 10:29 netspirit
          我剛好要用這個(gè)。可以借鑒了,非常感謝   回復(fù)  更多評(píng)論
            
          # re: js table操作 -------- 移動(dòng)行 2008-06-14 08:19 
          真的好,我最近也要用這個(gè)東東
            回復(fù)  更多評(píng)論
            
          # re: js table操作 -------- 移動(dòng)行 2008-07-08 10:50 獨(dú)孤風(fēng)雲(yún)
          # re: js table操作 -------- 移動(dòng)行[未登錄](méi) 2009-03-12 22:07 dd
          樓主有才  回復(fù)  更多評(píng)論
            
          # re: js table操作 -------- 移動(dòng)行 2009-03-14 01:10 林春彬
          我看來(lái)學(xué)這個(gè)沒(méi)有希望了,好難啊  回復(fù)  更多評(píng)論
            
          # re: js table操作 -------- 移動(dòng)行[未登錄](méi) 2009-11-20 10:13 凌寒
          太有才了,感謝啦 !
            回復(fù)  更多評(píng)論
            
          # re: js table操作 -------- 移動(dòng)行[未登錄](méi) 2012-08-23 09:28 Scorpio
          主站蜘蛛池模板: 碌曲县| 绩溪县| 香港| 开封县| 山东| 仙游县| 文登市| 开平市| 安福县| 班戈县| 桂平市| 内乡县| 陇南市| 松滋市| 鹤岗市| 抚宁县| 资溪县| 隆尧县| 文登市| 个旧市| 突泉县| 五华县| 壶关县| 鄂托克前旗| 巴南区| 锡林郭勒盟| 商南县| 石河子市| 密山市| 饶河县| 扎兰屯市| 建平县| 大同县| 庄浪县| 禄丰县| 阳山县| 合肥市| 合作市| 宁化县| 油尖旺区| 麦盖提县|