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; 
          } 
        } 
      } 
       
      /* 点击之后排序,排序之后恢复之前的状态 
 
if (flag){ 
       
      for (var x = 0; x < rows1.length; x++) { 
        //       tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容 
        rows1[x].parentNode.appendChild(rows1[x]); 
      } 
    }else{ 
       
      for (var x = 1; x < rows0.length; x++) { 
        //       tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容 
        rows0[x].parentNode.appendChild(rows0[x]); 
      } 
    } 
    flag=!flag;*/ 
    /* 下面的是点之后出现正序和逆序显示 正序和逆序的区别就是appendchild的前后关系而已*/ 
    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; 
  } 

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

javascript实现对表格元素进行排序操作_第1张图片

升序:

javascript实现对表格元素进行排序操作_第2张图片

降序:

javascript实现对表格元素进行排序操作_第3张图片

完整代码:

 
 
  
  sort.html 
   
   
 
  
  
  
  
姓名 年龄 出生地
张三 13 湖南长沙
李四 15 湖南常德
jack 45 湖南临澧
王华 23 浙江杭州
张进 30 安微合肥
周全 23 湖南益阳
杨哥 42 湖南常德

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

你可能感兴趣的:(javascript实现对表格元素进行排序操作)