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 相关文章推荐
Json对象替换字符串占位符实现代码
Nov 17 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
js实现小星星游戏
Mar 23 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
星际原理概述
2020/03/04 星际争霸
php的正则处理函数总结分析
2008/06/20 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
浅析vue深复制
2018/01/29 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python负载均衡的简单实现方法
2018/02/04 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
会计自我鉴定范文
2013/10/06 职场文书
网络维护管理员的自我评价分享
2013/11/11 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
给学校的建议书400字
2015/09/14 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
Java SSM配置文件案例详解
2021/08/30 Java/Android
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏