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

本文实例讲述了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操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

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

赞 (0)

相关推荐

  • js对数组中的数字从小到大排序实现代码

    例子 1 In this example we will create an array and sort it alphabetically: var arr = new Array(6) arr[0] = "Jani" arr[1] = "Hege" arr[2] = "Stale" arr[3] = "Kai Jim" arr[4] = "Borge" arr[5] = "Tove"

  • javascript对JSON数据排序的3个例子

    一.适用于数字排序和字幕排序 json 的排序方法有很多种,这是其中最简单的一种方法. 复制代码 代码如下: var sortBy = function (filed, rev, primer) {     rev = (rev) ? -1 : 1;     return function (a, b) {         a = a[filed];         b = b[filed];         if (typeof (primer) != 'undefined') {      

  • js中数组(Array)的排序(sort)注意事项说明

    直接看代码吧,测试结果也贴在里面了 复制代码 代码如下: var arrDemo = new Array(); arrDemo[0] = 10; arrDemo[1] = 50; arrDemo[2] = 51; arrDemo[3] = 100; arrDemo.sort(); //调用sort方法后,数组本身会被改变,即影响原数组 alert(arrDemo);//10,100,50,51 默认情况下sort方法是按ascii字母顺序排序的,而非我们认为是按数字大小排序 arrDemo.so

  • JavaScript中三种常见的排序方法

    1.快速排序: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速排序</title> </head> <body> <script> var ary=[21,8,4,32,5]; function quickSort(ary){ if(ary.length<=

  • js快速排序的实现代码

    但是有不少的书本讲得并不是很清楚,而且不同的教材的实现方式也不尽相同,我这里将最简单的快速排序的思路写出来供大家参考. 希望不管是使用什么语言都能从这个简单的代码里很方便的掌握快排思路与编写方式 复制代码 代码如下: function quick_sort(list, start, end) {        if (start < end) {          var pivotpos = partition(list, start, end);   //找出快排的基数          q

  • js交换排序 冒泡排序算法（Javascript版）

    比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 针对所有的元素重复以上的步骤,除了最后一个. 持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较. function sort(elements){ for(var i=0;i<elements.length-1;i++){ for(var j=0;j<elements.length-i-1;j++){ if(elemen

  • js常用排序实现代码

    复制代码 代码如下: <script> Array.prototype.swap = function(i, j) { var temp = this[i]; this[i] = this[j]; this[j] = temp; } Array.prototype.bubbleSort = function() { for (var i = this.length - 1; i > 0; --i) { for (var j = 0; j < i; ++j) { if (this[j

  • JS实现最简单的冒泡排序算法

    JS实现最简单的冒泡排序算法

    1. 算法步骤 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.这步做完后,最后的元素会是最大的数. 针对所有的元素重复以上的步骤,除了最后一个. 持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较. 2. 动图演示 3. 什么时候最快 当输入的数据已经是正序时(都已经是正序了,我还要你冒泡排序有何用啊). 4. 什么时候最慢 当输入的数据是反序时(写一个 for 循环反序输出数据不就行了,干嘛要用你冒泡排序呢

  • 简单理解js的冒泡排序

    简单理解js的冒泡排序

    关于排序,其实不管是哪种语言,都有它内置的排序函数,我们要用的时候调用就行了,既然如此,我们为什么还要讲这个东西呢?我想,其实,我们讲排序更多是在于排序中包含的思想算法,因为,算法对于计算机来说相当重要,一个好的算法能够让计算机的效率达到事半功倍的效果,所以,算法是计算机语言中一门相当热门的课程,它所代表的计算机思维也是很值得我们去深入研究的. 我也知道,关于我标题中的排序,博客园中的很多作者都写过详细解释的文章,可能,笔者本人认为自己的理解更能体现出这个排序的工作原理吧,所以,笔者也就大惭不愧

  • js对象数组按属性快速排序

    按所推荐的程序在IE下跑了下,的确,排序耗时很小. 复制代码 代码如下: <script> /* * 洗牌 */ function getRandomPlayCard(m){ var array1=new Array(m); for(var i=0;i<m;i++){ var rnd=Math.floor(Math.random()*(i+0.99999)) array1[i]=array1[rnd]; array1[rnd]=i; } return array1; }; /* * 快速

随机推荐