首页 / JAVASCRIPT / js table排序类代码

js table排序类代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js table排序类代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2720字，纯文字阅读大概需要4分钟。

内容图文

<!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=gb2312" /> 
<title>table排序类</title> 
</head> 
<body> 
<style type="text/css"> 
.fu_list{ width:400px; border:1px solid #ebebeb;line-height:20px; font-size:12px;} 
.fu_list thead td{background-color:#ebebeb;} 
.fu_list td{padding:5px;} 
.fu_list a{outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/ text-decoration:none; color:#333;} 
.fu_list thead a{padding-right:15px;} 
.fu_list thead a.up, .fu_list thead a.down{ background:url(up.gif) right center no-repeat; } 
.fu_list thead a.down{background-image:url(down.gif);} 
</style> 
<table border="0" cellspacing="0" cellpadding="0" class="fu_list"> 
<thead> 
<tr> 
<td> 名称 / 类型</td> 
<td width="200" align="center">上传时间</td> 
<td width="50" align="center">大小</td> 
</tr> 
</thead> 
<tbody id="idList"> 
<tr> 
<td _ext="rar">new.rar</td> 
<td align="center" _order="2008/9/12 8:51:09">2008-9-12 8:51:09</td> 
<td align="right" _order="433247">423.09 K</td> 
</tr> 
<tr> 
<td _ext="js">TagControl.js</td> 
<td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td> 
<td align="right" _order="1387">1.35 K</td> 
</tr> 
<tr> 
<td _ext="js">Scroller.js</td> 
<td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td> 
<td align="right" _order="2556">2.5 K</td> 
</tr> 
<tr> 
<td _ext="js">AlertBox.js</td> 
<td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td> 
<td align="right" _order="3565">3.48 K</td> 
</tr> 
<tr> 
<td _ext="htm">1.htm</td> 
<td align="center" _order="2008/10/4 20:21:54">2008-10-4 20:21:54</td> 
<td align="right" _order="11394">11.13 K</td> 
</tr> 
<tr> 
<td _ext="htm">4.htm</td> 
<td align="center" _order="2008/10/4 20:21:54">2008-10-4 20:21:54</td> 
<td align="right" _order="351">351 b</td> 
</tr> 
<tr> 
<td _ext="xml">news.xml</td> 
<td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td> 
<td align="right" _order="14074">13.74 K</td> 
</tr> 
<tr> 
<td _ext="xsl">news.xsl</td> 
<td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td> 
<td align="right" _order="16796">16.4 K</td> 
</tr> 
<tr> 
<td _ext="js">function.js</td> 
<td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td> 
<td align="right" _order="2844">2.78 K</td> 
</tr> 
</tbody> 
</table> 
<script type="text/javascript"> 
var $ = function (id) { 
return "string" == typeof id ? document.getElementById(id) : id; 
}; 
var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this, arguments); 
} 
} 
} 
Object.extend = function(destination, source) { 
    for (var property in source) { 
        destination[property] = source[property]; 
    } 
    return destination; 
} 
function Each(list, fun){ 
    for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } 
}; 
///////////////////////////////////// 
//////////////////////////////// 
var TableOrder = Class.create(); 
TableOrder.prototype = { 
initialize: function(tbody) { 
    var oThis = this; 
     
    this.Body = $(tbody);//tbody对象 
    this.Rows = [];//行集合 
     
    Each(this.Body.rows, function(o){ oThis.Rows.push(o); }) 
}, 
//排序并显示 
Sort: function(order) { 
    //排序 
    this.Rows.sort(this.Compare(order)); 
    order.Down && this.Rows.reverse(); 
    //显示表格 
    var oFragment = document.createDocumentFragment(); 
    Each(this.Rows, function(o){ oFragment.appendChild(o); }); 
    this.Body.appendChild(oFragment); 
}, 
//比较函数 
Compare: function(order) { 
    var oThis = this; 
    return function(o1, o2) { 
        var value1 = oThis.GetValue(o1, order), value2 = oThis.GetValue(o2, order); 
        return value1 < value2 ? -1 : value1 > value2 ? 1 : 0; 
    }; 
}, 
//获取比较值 
GetValue: function(tr, order) { 
    var data = tr.getElementsByTagName("td")[order.Index].getAttribute(order.Attribute); 
    //数据转换 
    switch (order.DataType.toLowerCase()) { 
        case "int": 
            return parseInt(data) || 0; 
        case "float": 
            return parseFloat(data) || 0; 
        case "date": 
            return Date.parse(data) || 0; 
        case "string": 
        default: 
            return data.toString() || ""; 
    } 
}, 
//添加并返回一个排序对象 
Add: function(index, options) { 
    var oThis = this; 
    return new function(){ 
        //默认属性 
        this.Attribute = "innerHTML";//获取数据的属性 
        this.DataType = "string";//数据类型 
        this.Down = false;//是否按顺序 
        Object.extend(this, options || {}); 
        //排序对象的属性 
        this.Index = index; 
        this.Sort = function(){ oThis.Sort(this); }; 
    }; 
} 
} 
var to = new TableOrder("idList"); 
function SetOrder(obj, index, options){ 
    var o = $(obj); 
    //添加一个排序对象 
    var order = to.Add(index, options); 
    o.onclick = function(){ 
        //取相反排序 
        order.Down = !order.Down; 
        //设置样式 
        Each(SetOrder._arr, function(o){ o.className = ""; }) 
        o.className = order.Down ? "down" : "up"; 
        //排序显示 
        order.Sort(); 
        return false; 
    } 
    //_arr是记录排序项目（这里主要用来设置样式） 
    SetOrder._arr ? SetOrder._arr.push(o) : SetOrder._arr = []; 
} 
SetOrder("idTitle", 0); 
SetOrder("idExt", 0, { Attribute: "_ext" }); 
SetOrder("idAddtime", 1, { Attribute: "_order", DataType: "date" }); 
SetOrder("idSize", 2, { Attribute: "_order", DataType: "int" }); 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

内容总结

以上是互联网集市为您收集整理的js table排序类代码全部内容，希望文章能够帮你解决js table排序类代码所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/384308.html

来源：【匿名】

【上一篇】asp下用fso生成js文件的代码【下一篇】javascript 怎么调用php方法

更多 ►

【js table排序类代码】教程文章相关的互联网学习教程文章

[Javascript] Modifying an Immutable.js Map()【代码】

We will now look at five methods that modify an Immutable.Map().setupdatedeleteclearmerge//set()var map = Immutable.Map(); var todo = {id: +new Date(),name: "todo1",content: "learning Immutable" } map = map.set(todo.id, todo); var task = map.get(todo.id); console.log(task.content); //"learning Immutable"//updatevar map = Immutable.Map(); var todo = {id: +new Date(),name: "todo1",content: "learning...

js的传值，table中tr的遍历，js中动态创建数组

1、这里关键是对页面中的传值，其次是动态的创建一个数组，用来存值$(val).css("background-color", "rgb(251, 248, 233)");//取消选中var ary;if (crival_number.indexOf(fnumber) > 0) {var fnumbers = crival_number.split(",");//然后做的操作便是从crival_number中去掉相对应的numberary = new Array(fnumbers.length);for (var i = 0, j = 0; i < fnumbers.length; i++, j++) {if (fnumbers[i] != fnumber) {ary[j] = fnumbe...

Chrome-逆向分析JS-2获取发送请求位置（以datatables获取表格数据为例）

剧透：就是使用了一下Chrome Source的XHR/fetch Breakpoints 功能，在发送请求时在该行进入断点调试。# 一：不认识一下XHR/fetch Breakpoints 这个功能么？可以去 https://developers.google.com/web/tools/chrome-devtools/ 这里找找，但一般人都打不开，我在这里大概说一下。1. 勾上Any XHR or fetch就能在发送任何请求时在该行进入断点调试 2. 同时点右上角的加号或右键选择 Add breakpoints ，输入一个字符串，在URL包含该字符...

js对Table表格的操作【代码】

js对Table表格的操作对于表格 Table javascript也提供了一些操作方法oTable.tHead 获取表格里面 tHead的元素oTable.tBodies 获取表格里面正文的元素oTable.tFoot 获取表格里面的底部元素rows 行cells 列示例如下:<script language="javascript">window.onload=function(){var oTable=document.getElementById("oTable");//获取页上面的表格对象//打印正文->第二行->第三列的数据console.log( oTable.oTable.tBodies[...

js实现哈希表（HashTable）【代码】【图】

在算法中，尤其是有关数组的算法中，哈希表的使用可以很好的解决问题，所以这篇文章会记录一些有关js实现哈希表并给出解决实际问题的例子。第一部分：相关知识点属性的枚举:var person = {name: "zzw",sex: "Male",age: 21};for (var prop in person) {console.log(prop + "",person[prop]);}输出：即对于对象而言，我们可以使用for in来枚举对象的属性。属性的删除：var person = {name: "zzw",sex: "Male",age: 21};var ifRemov...

JS与jQuery遍历Table所有单元格内容的方法_javascript技巧

本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法。分享给大家供大家参考，具体如下：用JS去遍历Table的所有单元格中的内容，可以用如下JS代码实现：function GetInfoFromTable(tableid) {var tableInfo = "";var tableObj = document.getElementById(tableid);for (var i = 0; i 这个方法的参数是唯一标识Table的id，用document对象的获取 jQuery 遍历Table中tr中的td中的内容： 1、$("#trID td").text()得到的是一个所以...

layui 对table中的数据进行转义的实例

方法一通过done回调进行遍历： //方法级渲染table.render({id: demoList,elem: #demoList, url: showDemoList, cols: [[{checkbox: true, fixed: true, width: 10%}, {field: id, title: 编号, width: 15%, sort: true}, {field: pipe_id, title: 机构ID, width: 15%}, {field: bank_id, title: 银行ID, width: 10%}, {field: pipe_cost, title: 成本, width: 10%}, {field: status, title: 状态, width: 20%}, {field: remark, t...

iview table render集成switch开关的实例【图】

今天想要分享的是iview table render集成switch开关修改table表格的值，看文档记得看2.0的，不注意打开就成1.0然后用上了一直没有效果又没有找出原因。给出的只是一种写法思路，具体自己集成。一、效果如下即是打开处理switch开关，对应修改为已处理状态，关闭switch开关，修改为未处理状态。二、template html写法 <span style="font-size:14px;"><Table highlight-row border :columns="columns1" :data="data1" ref="table" :...

jquery获取table指定行和列的数据方法(当前选中行、列)

实例如下： //不多说，直接上代码。 $("table tr").click(function() {//为表格的行添加点击事件var tr = $(this);//找到tr原色var td = tr.find("td");//找到td元素alert(td[0].innerHTML);//指定下标即可})今日项目中需要用到取table选中列的数据，网上资料发现都不能获取到选中指定列的数据，通过分析测试后总结出以上代码，可以获取选中行/列的数据。取td的数据不是.val()，也不是.html()。经过多次测试才发现是通过innerHTML(...

jQuery遍历Table应用示例_jquery

代码如下: function checkwo(){ var vales = ""; $("#vales").val(vales); var flag = false; var bo = true; $("#data_table").find("tr").each(function(){ $(this).find("td input").each(function(){ if($(this).attr("name")=="rid") { vales+=$(this).val()+"&"; } if($(this).attr("name")=="qty") { var qty = $(this).val(); if(qty<0) { alert("实盘数量不能为负数"); bo = false; return; } if(qty>0) { flag = true; }...

layui-table表复选框勾选的所有行数据获取的例子【图】

项目需求，可以用复选框勾选项目进行提交，如下表 <table class="layui-table" lay-data="{url:******, id:test3}" lay-filter="test3"><thead><tr><th lay-data="{type:checkbox}">ID</th><th lay-data="{field:id, width:80}">ID</th><th lay-data="{field:t1}">测试项</th><th lay-data="{field:t2, edit: text}">标定参数</th><th lay-data="{field:t3}">标定值</th></tr></thead> </table>我们已经获取到了表中所有行的数据，...

怎么使用jQuery选中并且操作table【图】

这次给大家带来怎么使用jQuery选中并且操作table，使用jQuery选中并且操作table的注意事项有哪些，下面就是实战案例，一起来看一下。比较表格的内容。判断是否合并单元格：tr = $("#printPage tr").length;// 获取当前表格中tr的个数 var mark = 0; //要合并的单元格数 var index = 0; //起始行数 /* * 要合并单元格，需要存储两个参数， * 1，开始合并的单元格的第一行的行数， * 2.要合并的单元格的个数 **/ console.log(tr); //...

javascript – TypeScript：IFrame沙箱属性未定义,DOMSettableTokenList没有构造函数【代码】

我在类型脚本中创建一个iFrame元素：var iFrameElement : HTMLIFrameElement = document.createElement("iframe"); iFrameElement.sandbox.add('allow-forms'); iFrameElement.sandbox.add('allow-scripts'); iFrameElement.sandbox.add('allow-same-origin');但是,sandbox属性未定义,因此add(value：string)此处失败. 我无法弄清楚如何实例化sandbox属性,这里是lib.d.ts中定义的接口：interface HTMLIFrameElement {sandbox: DOM...

layui的table如何做批量删除【图】

layui的table做批量删除实现代码如下：// 批量删除功能// 1.得到table选中行内容// 2.得到删除需要的唯一值，一般是id;// 3.将所要删除的项加入到数组中；// 4.判断是否选中；// 5.发送ajax请求，并附带参数id；var $=layui.$,active={deLink:function () {var checkStatus=table.checkStatus(idTest),data=checkStatus.data,deList=[];data.forEach(function(n,i){delList.push(n.id);});if(delList!=){layer.comfirm(确定删除所选...

javascript-handsontable怎么让某一行设置为不可编辑

$("#handtable").handsontable("setDataAtCell",i,5,'添加成功');我这边点按钮提交符合要求的行不可编辑应该怎么弄啊还有怎么给添加成功上字体颜色样式呢回复内容：$("#handtable").handsontable("setDataAtCell",i,5,添加成功);我这边点按钮提交符合要求的行不可编辑应该怎么弄啊还有怎么给添加成功上字体颜色样式呢

首页 / JAVASCRIPT / js table排序类代码

js table排序类代码

内容导读

内容图文

内容总结

内容备注

内容手机端

【js table排序类代码】教程文章相关的互联网学习教程文章

TABLE - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程