首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

- Author -

YX_blog

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
ES6关于Promise的用法详解
May 07 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
原生JavaScript实现五子棋游戏
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
丹麦购物网站(22) 肯尼亚购物网站(2) 台湾购物网站(77) 比利时购物网站(33) 澳大利亚购物网站(309) 挪威购物网站(7) 意大利购物网站(128) 阿根廷购物网站(9) 瑞典购物网站(55) 芬兰购物网站(10)
You might like
77A一级收信机修理记
2021/03/02 无线电
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
在Python的Django框架中编写编译函数
2015/07/20 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python+django快速实现文件上传
2016/10/24 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
Django权限设置及验证方式
2020/05/13 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
加拿大城市本地限时优惠：Buytopia.ca
2018/09/19 全球购物
String这个类型的class为何定义成final？
2012/11/13 面试题
夜大毕业生自我评价分享
2013/11/10 职场文书
财务部总监岗位职责
2014/03/12 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
优秀创业计划书分享
2019/07/19 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
Go 语言中 20 个占位符的整理
2021/10/16 Golang
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android