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 相关文章推荐
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
es5 类与es6中class的区别小结
Nov 09 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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
Laravel 批量更新多条数据的示例
2017/11/27 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
Axios学习笔记之使用方法教程
2017/07/21 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
python实现ping的方法
2015/07/06 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
团员的自我评价
2013/12/01 职场文书
迁户口计划生育证明
2014/10/19 职场文书
2014年女职工工作总结
2014/11/27 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS