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


Posted in Javascript onNovember 18, 2015

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

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<rowslength;x++){//根据每一个去设置 
          if(x%2==0){ 
            rows[x].className="one"; 
          }else{ 
            rows[x].className="two"; 
          } 
          //当移动上去之后,之前的颜色要记录下来,不然移下来之后全部都是一个颜色了 
          rows[x].onmouseover=function(){ 
            name=this.className; 
            this.className="three"; 
          } 
          rows[x].onmouseout=function(){ 
            this.className=name; 
          } 
        } 
         
      } 
      onload=function(){ 
        loading(); 
      }

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实现对表格元素进行排序操作

升序:

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

降序:

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

完整代码:

<!DOCTYPE html> 
<html> 
 <head> 
  <title>sort.html</title> 
  <style type="text/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; 
    } 
   
  </style> 
  <script type="text/javascript"> 
     
      function loading(){ 
        var name; 
        var tabNode=document.getElementById("tabid"); 
        var rows=tabNode.rows;//获得每一行的数组对象 
        var rowslength=rows.length;//每一行的长度 
        for(var x=1;x<rowslength;x++){//根据每一个去设置 
          if(x%2==0){ 
            rows[x].className="one"; 
          }else{ 
            rows[x].className="two"; 
          } 
          //当移动上去之后,之前的颜色要记录下来,不然移下来之后全部都是一个颜色了 
          rows[x].onmouseover=function(){ 
            name=this.className; 
            this.className="three"; 
          } 
          rows[x].onmouseout=function(){ 
            this.className=name; 
          } 
        } 
         
      } 
      onload=function(){ 
        loading(); 
      } 
    var flag=true; 
    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();//排序之后还要对颜色重新设置 
         
    } 
  </script> 
 
 </head> 
  
 <body> 
  <table id="tabid"> 
    <tr><th>姓名</th> 
      <th><a href="javascript:void(0)" onclick="sortAge()" id="ageid">年龄</a></th> 
      <th>出生地</th> 
    </tr> 
    <tr> 
      <td>张三</td> 
      <td>13</td> 
      <td>湖南长沙</td> 
    </tr> 
    <tr> 
      <td>李四</td> 
      <td>15</td> 
      <td>湖南常德</td> 
    </tr> 
    <tr> 
      <td>jack</td> 
      <td>45</td> 
      <td>湖南临澧</td> 
    </tr> 
    <tr> 
      <td>王华</td> 
      <td>23</td> 
      <td>浙江杭州</td> 
    </tr> 
    <tr> 
      <td>张进</td> 
      <td>30</td> 
      <td>安微合肥</td> 
    </tr> 
    <tr> 
      <td>周全</td> 
      <td>23</td> 
      <td>湖南益阳</td> 
    </tr> 
    <tr> 
      <td>杨哥</td> 
      <td>42</td> 
      <td>湖南常德</td> 
    </tr> 
   
  </table> 
 </body> 
</html>

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

Javascript 相关文章推荐
JavaScript 应用技巧集合[推荐]
Aug 30 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 #Javascript
javascript下拉列表菜单的实现方法
Nov 18 #Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 #Javascript
详解JavaScript中常用的函数类型
Nov 18 #Javascript
JavaScript如何动态创建table表格
Aug 02 #Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 #Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 #Javascript
You might like
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
简单的js表单验证函数
2013/10/28 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
Jquery性能优化详解
2014/05/15 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
js消除图片小游戏代码
2019/12/11 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
python 实现倒排索引的方法
2018/12/25 Python
Python3常用内置方法代码实例
2019/11/18 Python
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
"序列点" 是什么
2016/07/29 面试题
大学毕业生自我鉴定
2013/11/05 职场文书
学校门卫工作职责
2013/12/07 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
小学生常见病防治方案
2014/06/06 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
单位未婚证明范本
2014/11/25 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python