编程 Javascript

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程序设计有所帮助。

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

- Author -

鬼畜十三

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 中关于CSS操作部分使用说明

Jun 10 Javascript

Moment.js 不容错过的超棒Javascript日期处理类库

Apr 15 Javascript

为EasyUI的Tab标签添加右键菜单的方法

Jul 14 Javascript

jquery实现省市select下拉框的替换(示例代码)

Feb 22 Javascript

javascript封装简单实现方法

Aug 11 Javascript

探究Javascript模板引擎mustache.js使用方法

Jan 26 Javascript

让浏览器崩溃的12行JS代码(DoS攻击分析及防御)

Oct 10 Javascript

微信小程序后台解密用户数据实例详解

Jun 28 Javascript

使用nvm管理不同版本的node与npm的方法

Oct 31 Javascript

详解JWT token心得与使用实例

Aug 02 Javascript

JavaScript冒泡算法原理与实现方法深入理解

Jun 04 Javascript

详解JavaScript中new操作符的解析和实现

Sep 04 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