javascript实现对表格元素进行排序操作

我们在上网中都能看到很多能够排序的，如大小、时间、价格等
现在我们也试一下排序功能：
排序的函数代码：里面含有点击之后排序--还原，和排升序和降序。

 function sortAge(){ 
      //对年龄进行排序，要先进行获得每一行对象，然后对象对象中的第一个（从0 开始）的大小进行排序 
      var tabNode = document.getElementById("tabid"); 
      var rows0 = tabNode.rows; 
      var rows1 = []; 
      //现将元素拷贝一份出来， 第一行不用排序 
      for (var x = 1; x < rows0.length; x++) { 
 rows1[x - 1] = rows0[x]; 
      } 
      for (var x = 0; x < rows1.length - 1; x++) {//每个元素是行对象 
 for (var y = x + 1; y < rows1.length; y++) { 
   //对每一行的内容进行解析成数字 
   if (parseInt(rows1[x].cells[1].innerHTML) > parseInt(rows1[y].cells[1].innerHTML)) { 
     //alert("aa="+x+":"+rows1[x].cells[1].innerHTML); 
     //alert("bb"+rows1[y].cells[1].innerHTML); 
     var temp = rows1[x]; 
     rows1[x] = rows1[y]; 
     rows1[y] = temp; 
   } 
 } 
      } 

       
     
    var ageimg=document.getElementById("ageid"); 
     
    if (flag) { 
      for (var x = 0; x < rows1.length; x++) {//排好序之后就从0开始 
 //tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容 
 rows1[x].parentNode.appendChild(rows1[x]); 
      } 
      ageimg.innerHTML="年龄▲";//设置上面的图标 

    }else{ 
      for (var x = rows1.length-1; x >=0; x--) { 
 //tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容 
 rows1[x].parentNode.appendChild(rows1[x]); 
      } 
      ageimg.innerHTML="年龄▼" 
    } 
    flag=!flag; 
      loading();//排序之后还要对颜色重新设置 
  
    } 

设置表格的背景颜色代码，导入的css：

function loading(){ 
 var name; 
 var tabNode=document.getElementById("tabid"); 
 var rows=tabNode.rows;//获得每一行的数组对象 
 var rowslength=rows.length;//每一行的长度 
 for(var x=1;x

css代码：



table td a:hover{ 
      background-color:#0080c0; 
    } 
  .one{ 
    background-color:#80ff00; 
  } 
  .two{ 
    background-color:#ff8040; 
  } 
  .three{ 
    background-color:#008040; 
  } 
  table{ 
    width:500px; 
    height:500px; 
    border:#400040 solid 2px; 
    border-collapse:collapse; 
  } 
  table td,th{ 
    border:solid 2px; 
  } 
  table th{ 
    background-color:#c0c0c0; 
  } 


效果图-----排序之前：

升序：

降序：

完整代码：



 
 
  
   
   
    table td a:hover{ 
      background-color:#0080c0; 
    } 
    .one{ 
      background-color:#80ff00; 
    } 
    .two{ 
      background-color:#ff8040; 
    } 
    .three{ 
      background-color:#008040; 
    } 
    table{ 
      width:500px; 
      height:500px; 
      border:#400040 solid 2px; 
      border-collapse:collapse; 
    } 
    table td,th{ 
      border:solid 2px; 
    } 
    table th{ 
      background-color:#c0c0c0; 
    } 
   
   
   
 
  
  
  
  
 
    
姓名
 
      
年龄
 
      
出生地
 
    
 
    
 
      
张三
 
      
13
 
      
湖南长沙
 
    
 
    
 
      
李四
 
      
15
 
      
湖南常德
 
    
 
    
 
      
jack
 
      
45
 
      
湖南临澧
 
    
 
    
 
      
王华
 
      
23
 
      
浙江杭州
 
    
 
    
 
      
张进
 
      
30
 
      
安微合肥
 
    
 
    
 
      
周全
 
      
23
 
      
湖南益阳
 
    
 
    
 
      
杨哥
 
      
42
 
      
湖南常德
 
    
 
   
  
 
  


以上就是本文的全部内容，很详细，教大家如何对表格中的元素进行排序操作，感谢大家阅读这篇javascript实现对表格元素进行排序操作的文章，希望大家喜欢。