随笔 - 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"><href="javascript:SetRow('up');" class="btlink2"  onclick="">↑向上移动</a><div style="margin-top:10px"><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 阅读(3328) 评论(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
漂亮  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: