JS简单实现表格排序功能示例


Posted in Javascript onDecember 20, 2016

本文实例讲述了JS简单实现表格排序功能的方法。分享给大家供大家参考,具体如下:

思路遍历每个li,并把它们存放到数组中去,然后通过sort()方法进行排序,再插入

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>排序</title>
</head>
<body>
  <input type="button" value="排序按钮" id="btn1">
  <ul id="ul1">
    <li>58</li>
    <li>8</li>
    <li>31</li>
    <li>98</li>
    <li>75</li>
  </ul>
<script type="text/javascript">
  window.onload=function(){
    var oBtn=document.getElementById("btn1");
    var arr=[];
    var oUl=document.getElementById("ul1");
    var aLi=oUl.getElementsByTagName("li");
    var i;
    var bAsc=true;
    oBtn.onclick=function(){
      for(i=0;i<aLi.length;i++){
        arr[i]=aLi[i];
      }
      arr.sort(function(li1,li2){
        if(bAsc){
          return parseInt(li1.innerHTML)-parseInt(li2.innerHTML);
        }
        else{
          return parseInt(li2.innerHTML)-parseInt(li1.innerHTML);
        }
      });
      for(i=0;i<arr.length;i++){
        oUl.appendChild(arr[i]); //appendChild实际上分两步  1.先移除父级 2.添加到新的父级 (添加到原本的父级就相当于把当前元素拿到队列的末尾)
      }
      if(bAsc){
        bAsc=false;
      } //==>bAsc=!bAsc;  //简化写法
      else{
        bAsc=true;
      }
    };
  }
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
jQuery聚合函数实例
May 21 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
手机端转换rem适应
Apr 01 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 #Javascript
js定时器实例分享
Dec 20 #Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 #Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 #Javascript
详解Jquery的事件操作和文档操作
Dec 19 #Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 #Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 #Javascript
You might like
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
最令PHP初学者们头痛的十四个问题
2007/01/15 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
深入解析php之sphinx
2013/05/15 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
php文件上传简单实现方法
2015/01/24 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
分享php分页的功能模块
2015/06/16 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
PHP学习记录之数组函数
2018/06/01 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
sublime text 3配置使用python操作方法
2017/06/11 Python
python3去掉string中的标点符号方法
2019/01/22 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
Prototype如何更新局部页面
2013/03/03 面试题
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
经典禁毒标语
2014/06/16 职场文书
考试作弊检讨书
2014/10/21 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书