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 相关文章推荐
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
解决vue-loader加载不上的问题
Oct 21 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处理换行符的问题 \r\n
2013/06/13 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
PHP7多线程搭建教程
2017/04/21 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
在Python中操作字典之clear()方法的使用
2015/05/21 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
Python和Go语言的区别总结
2019/02/20 Python
python制作图片缩略图
2019/04/30 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
django-csrf使用和禁用方式
2020/03/13 Python
Python列表如何更新值
2020/05/27 Python
如何教少儿学习Python编程
2020/07/10 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
办公室岗位职责
2014/02/12 职场文书
大学四年个人自我小结
2014/03/05 职场文书
师范毕业生求职信
2014/07/11 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
邀请函怎么写
2015/01/30 职场文书
大学生实习证明
2015/06/16 职场文书
在校生证明
2015/06/17 职场文书