[Js]表格排序

思路:遍历每个li,病并把它们存放到数组中去,然后通过sort()方法进行排序

<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;
      
 oBtn.onclick=function(){
      
     for(i=0;i<aLi.length;i++){
  
           
 arr[i]=aLi[i];
          
 }
          
 arr.sort(function(li1,li2){
      
         return
parseInt(li1.innerHTML)-parseInt(li2.innerHTML);
  
         });
  
       
 for(i=0;i<arr.length;i++){
      
       
 oUl.appendChild(arr[i]);
      
     }
      
 };
    }
</script>  
 
</body>

[Js]表格排序,布布扣,bubuko.com

时间: 2024-08-01 22:44:19

[Js]表格排序的相关文章

js表格排序

// a:列数 bool:排序升序判断参数 true false Str:支持多列 function newUnitSort(a, bool, str) { var oTable = document.getElementById('ATEST'); var arr = []; for (var i = 0; i < oTable.tBodies[0].rows.length; i++) { arr[i] = oTable.tBodies[0].rows[i]; } if (bool) { if

js学习总结----表格排序及dom映射

一.表格排序 //1.先把元素集合类数组转化为数组 var ary = utils.listToArray(oLis);//上几节封装好的listToArray //2.给数组进行排序:按照每一个li中的内容大小进行排序 ary.sort(function(a,b){ return parseFloat(a.innerHTML) - parseFloat(b.innerHTML) }) //3.按照ary中存储的最新顺序依次的把对应的li添加到页面当中 var frg = document.cr

JS实现表格排序

今天有点闲,写个小东西,使用JS实现点击表格标题栏实现自动排序功能,嘻嘻... 一.JS代码,文件名为code.js如下: (function($){ //插件 $.extend($,{ //命名空间 sortTable:{ sort:function(tableId,Idx){ var table = document.getElementById(tableId); var tbody = table.tBodies[0]; var tr = tbody.rows; var trValue

js学习总结----经典小案例之表格排序

具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;font-family:"微软雅黑";font-size:14px

JS表格组件神器bootstrap table详解(基础版)

这篇文章主要介绍了JS表格组件神器bootstrap table,bootstrap table界面采用扁平化的风格,用户体验比较好,更好兼容各种客户端,需要了解更多bootstrap table的朋友可以参考下 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用.

table排序,多个表格排序

<!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-

html表格排序之完全详解

<!DOCTYPE HTML> <html>  <head>     <title> 表格排序 </title>     <meta charset="utf-8">     <meta name="Generator" content="EditPlus">     <meta name="Author" content="t

使用jQuery UI 实现表格排序

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表格排序</title> <link rel="stylesheet" href="jquery-ui-1.12.0/jquery-ui.css"></head> <body><table id="myTabl

使用jquery的tablesorter插件进行表格排序

今天在学习bootstrap的时候,突然看见tablesorter这个东东了,立马百度了一下,发现了这个东东.. 下面说一下今天我在项目中看见前辈们用的表格排序 tablesorter的官方网站:http://tablesorter.com/docs/ 使用方法:1.下载tablesorter http://tablesorter.com/jquery.tablesorter.zip 2.解压文件,将jquery和jquery.tablesorter.min.js导入到项目文件中 3.修改htm