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 相关文章推荐
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
javascript插入样式实现代码
Feb 22 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
VsCode里的Vue模板的实现
Aug 12 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防注入及开发安全详细解析
2013/08/09 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
浅谈PHP封装CURL
2019/03/06 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
Div Select挡住的解决办法
2008/08/07 Javascript
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python反射用法实例简析
2017/12/22 Python
tensorflow获取变量维度信息
2018/03/10 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
银行职业规划书范文
2013/12/28 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
团委竞选演讲稿
2014/04/24 职场文书
土地转让协议书
2014/09/27 职场文书
党员活动总结
2015/02/04 职场文书
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js