首页
所有分类
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 相关文章推荐
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
JavaScript中string对象
Jun 12 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
Javascript三种字符串连接方式及性能比较
May 28 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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
数据类型(8) 入门基础(1) plus.io(1) RabbitMQ(3) 触发器(3) Vmware(3) 虚拟机(3) html5+(1) Hash(1) Geospatial(1)
You might like
php set_time_limit()函数的使用详解
2013/06/05 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
python 利用toapi库自动生成api
2020/10/19 Python
幼师自荐信范文
2013/10/06 职场文书
表彰先进集体通报
2014/01/12 职场文书
党员个人对照检查材料
2014/10/01 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
2015年大学生实习评语
2015/03/25 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
实习单位意见
2015/06/04 职场文书
推广普通话主题班会
2015/08/17 职场文书