js table操作 -------- 移动行-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

简介:
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>

本文转自博客园执着的笨蛋的博客,原文链接:js table操作 -------- 移动行,如需转载请自行联系原博主。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章