HTML列表内容自动排序,JS实现HTML表格排序功能

本文实例为大家分享了JavaScript实现HTML表格排序功能,供大家参考,具体内容如下

HTML代码:

click meclick meclick meclick me

15.43

7001.220

7.05

43,000

30.62

302,558,800

22.30

56

26.31

0.65-

63.16

74

JavaScirpt代码:

var tableSort = function(){

this.initialize.apply(this,arguments);

}

tableSort.prototype = {

initialize : function(tableId,clickRow,startRow,endRow,classUp,classDown,selectClass){

this.Table = document.getElementById(tableId);

this.rows = this.Table.rows;//所有行

this.Tags = this.rows[clickRow-1].cells;//标签td

this.up = classUp;

this.down = classDown;

this.startRow = startRow;

this.selectClass = selectClass;

this.endRow = (endRow == 999? this.rows.length : endRow);

this.T2Arr = this._td2Array();//所有受影响的td的二维数组

this.setShow();

},

//设置标签切换

setShow:function(){

var defaultClass = this.Tags[0].className;

for(var Tag ,i=0;Tag = this.Tags[i];i++){

Tag.index = i;

addEventListener(Tag ,'click', Bind(Tag,statu));

}

var _this =this;

var turn = 0;

function statu(){

for(var i=0;i<_this.tags.length>

_this.Tags[i].className = defaultClass;

}

if(turn==0){

addClass(this,_this.down)

_this.startArray(0,this.index);

turn=1;

}else{

addClass(this,_this.up)

_this.startArray(1,this.index);

turn=0;

}

}

},

//设置选中列样式

colClassSet:function(num,cla){

//得到关联到的td

for(var i= (this.startRow-1);i

for(var n=0;n

removeClass(this.rows[i].cells[n],cla);

}

addClass(this.rows[i].cells[num],cla);

}

},

//开始排序 num 根据第几列排序 aord 逆序还是顺序

startArray:function(aord,num){

var afterSort = this.sortMethod(this.T2Arr,aord,num);//排序后的二维数组传到排序方法中去

this.array2Td(num,afterSort);//输出

},

//将受影响的行和列转换成二维数组

_td2Array:function(){

var arr=[];

for(var i=(this.startRow-1),l=0;i

arr[l]=[];

for(var n=0;n

arr[l].push(this.rows[i].cells[n].innerHTML);

}

}

return arr;

},

//根据排序后的二维数组来输出相应的行和列的 innerHTML

array2Td:function(num,arr){

this.colClassSet(num,this.selectClass);

for(var i= (this.startRow-1),l=0;i

for(var n=0;n

this.rows[i].cells[n].innerHTML = arr[l][n];

}

}

},

//传进来一个二维数组,根据二维数组的子项中的w项排序,再返回排序后的二维数组

sortMethod:function(arr,aord,w){

arr.sort(function(a,b){

x = killHTML(a[w]);

y = killHTML(b[w]);

x = x.replace(/,/g,'');

y = y.replace(/,/g,'');

switch (isNaN(x)){

case false:

return Number(x) - Number(y);

break;

case true:

return x.localeCompare(y);

break;

}

});

arr = aord==0?arr:arr.reverse();

return arr;

}

}

/*-----------------------------------*/

function addEventListener(o,type,fn){

if(o.attachEvent){

o.attachEvent('on'+type,fn);

}else if(o.addEventListener){

o.addEventListener(type,fn,false);

}else{

o['on'+type] = fn;

}

}

function hasClass(element, className) {

var reg = new RegExp('(\s|^)'+className+'(\s|$)');

return element.className.match(reg);

}

function addClass(element, className) {

if (!this.hasClass(element, className)) {

element.className += " "+className;

}

}

function removeClass(element, className) {

if (hasClass(element, className)) {

var reg = new RegExp('(\s|^)'+className+'(\s|$)');

element.className = element.className.replace(reg,' ');

}

}

var Bind = function(object, fun) {

return function() {

return fun.apply(object, arguments);

}

}

//去掉所有的html标记

function killHTML(str){

return str.replace(/]+>/g,"");

}

//------------------------------------------------

//tableid 第几行是标签行,从第几行开始排序,第几行结束排序(999表示最后) 升序标签样式,降序标签样式 选中列样式

//注意标签行的class应该是一致的

var ex1 = new tableSort('table',1,2,999,'up','down','hov');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/504712.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html复选框打钩行变颜色,Excel 单元格打勾会变颜色,开发工具的复选框这样玩...

Excel中的复选框除了打钩&#xff0c;打叉之外还有什么其他功能吗&#xff1f;其实&#xff0c;这里面的学问可多了&#xff0c;可造之物也非常之多。今天&#xff0c;我就利用复选框来教大家制作一个特别的表格&#xff0c;在复选框中打钩的后&#xff0c;单元格的颜色就会随着…

js怎么图表在html中显示不出来的,基于Echarts图表在div动态切换时不显示的解决方式...

简单粗暴&#xff0c;先上图&#xff0c;大概长这样&#xff1a;在使用vue时有遇到像上图下拉框change事件切换div&#xff0c;change切完后大概会变成这个样子&#xff1a;上代码&#xff1a;{{ option.text }}{{selected}}export default{name:"test",data(){retur…

【UML】第13篇 序列图(2/2)——建模的方法

目录 三、序列图建模 3.1 概述 3.2 建模的步骤 3.3 举例说明步骤 1.确定主要场景和流程 2.确定参与的对象 3.绘制序列图 4.注意事项 3.4 特殊的情况 序列图是我个人认为&#xff0c;UML中最重要的图之一。 而且序列图&#xff0c;对于业务建模&#xff0c;也有非常好…

如何创建计算机的桌面快捷方式,怎么设置桌面快捷方式,怎么创建快捷方式到桌面...

很多win7系统用户反映说遇到这样一个问题&#xff0c;就是电脑上从文件服务器创建的快捷方式就会自动被删除&#xff0c;自己重新创建之后&#xff0c;过几天重新启动win7系统的时候&#xff0c;那些快捷方式又会自动被删除不见了&#xff0c;怎么办呢&#xff0c;下面以win7 3…

哥大计算机专业 世界排名,哥伦比亚大学计算机科学硕士排名第16(2020年TFE Times排名)...

哥伦比亚大学实力介绍哥伦比亚大学除去常青藤的榜首地位&#xff0c;研究生的金融工程 更是被人们称为是金工届的magic seven 并且商学院以及MBA项目是很多人垂涎已久的。更有远近闻名的国际公共关系事物学院&#xff0c;以及新闻专业。2020年TFE Times美国计算机科学硕士排名参…

福师计算机应用基础在线作业二及答,福师《计算机应用基础》在线作业二 下列软件中属于应用软件的是.docx...

福师《计算机应用基础》在线作业二 下列软件中属于应用软件的是.docx 计算机应用基础计算机应用基础1 1 单选题单选题1 下列软件中属于应用软件的是() D A 操作系统B 编译程序C 数据库管理系统D 财务管理系统2 以下域名中&#xff0c;表示商业网的是() C A eduB cnC comD org3 …

台式计算机没有usb3.0,新装的win7没有usb驱动完美解决方法(支持usb3.0/usb3.1)

最近有很多网友问&#xff0c;为什么我新装win7系统后usb驱动&#xff0c;相关的usb鼠标键盘都不能用了怎么办&#xff1f;大家都知道&#xff0c;win10系统虽然发布了几年&#xff0c;但是由于Win7的习惯留住了不少Win7忠实用户&#xff0c;因此Win7系统的使用用户还是比较多的…

为此计算机上的所有用户安装此加载项,activex 安装给所有计算机用户

我通过以下inf文件 创建了一个cab文件[version]signature"$CHICAGO$"AdvancedINF2.0[Add.Code]Test.dllTest.dll[Deployment]InstallScopemachine[Test.dll]file-win32-x86thiscabclsid{49C4436D-AA73-4324-807D-50C0D5B8AF5D}FileVersion1,0,0,0RegisterServeryesRe…

typora用Pandoc导出html,Typora安装 Pandoc实现导出功能

Typora安装 Pandoc实现导出功能问题引入在使用Typora的时候&#xff0c;如果想要把写好的MarkDown文件导出到其他地方的话&#xff0c;是比较方便的。但是Typora本身只支持PDF和HTML两种方式的导出&#xff0c;如下图所示&#xff0c;如果想导出下面的方式他就会提示安装Pandoc…

微型计算机惠普1hm20av,微型计算机原理及应用(答案).doc

微型计算机原理及应用(第3版)(修订本)答案习 题 1一、选择题1.A2.C3.B4.B5.A6.A7.B8.C9.C10.C11.C12.A13.D14.A15.D16.C在GB2312-80国家标准中&#xff0c;16~55区为一级汉字、56~87区为二级汉字。DBB5H&#xff0d;A0A0H 3B15H3BH 59DBB5H属于二级汉字。二、完成下列不同进制…

游戏教案 电子计算机,计算机模板电子教案.doc

教案,小学教案,全册教案,教案设计,教学设计,教案全集,全册教学设计,全本教案PAGEPAGE \* MERGEFORMAT 30六年级信息技术教学设计立岗小学电子教案模板教学内容1、网上论坛BBS课时1课时教学目标1、认识一个网上论坛BBS的界面&#xff0c;学习尝试在其中注册并浏览&#xff0c;发…

联想笔记本关闭锁定计算机,联想笔记本Win10怎样显示/隐藏大小写锁定及数字锁定图标...

近来&#xff0c;很多联想Win10笔记本用户都在抱怨自己的电脑桌面总会显示大小写锁定和数字小键盘锁定图标&#xff0c;看着很不习惯。那么&#xff0c;我们要怎样设置图标隐藏呢&#xff1f;下面&#xff0c;小编就向大家分享联想笔记本Win10设置显示/隐藏大小写锁定及数字锁定…

气象科学与计算机应用论文,面向气象数据的智能分析方法分析-计算机应用技术专业毕业论文.docx...

摘要摘要降水预测问题是一个非常复杂、重要的研究课题。一种事物从过去发展到现在再发展到未来&#xff0c;其发展总存在某些内在的规律&#xff0c;国内外的一些专家和学者们积极的进行探索&#xff0c; 掌握事物发展的固有规律&#xff0c;把预测问题置于科学的基础之上&…

mysql for update_mysql SELECT FOR UPDATE语句使用示例

以MySQL 的InnoDB 为例&#xff0c;预设的Tansaction isolation level 为REPEATABLE READ&#xff0c;在SELECT 的读取锁定主要分为两种方式:SELECT ... LOCK IN SHARE MODE SELECT ... FOR UPDATE这两种方式在事务(Transaction) 进行当中SELECT 到同一个数据表时&#xff0c;都…

html4基础,HTML 基础 4

有序列表、无序列表和自定义列表无序列表适合所有并列或没有上下级关系的条目的显示有序列表适合有明确排序的条目的显示自定义列表更突出自定义标题可以直接在 li 和 dd 中写新的列表来嵌套如何去除列表前的点或者数字li{list-style: none;}class和id的区别以及适用情况class可…

mysql 主键长度_MySQL 数据库,主键为何不宜太长长长长长长长长?

回答星球水友提问&#xff1a;沈老师&#xff0c;我听网上说&#xff0c;MySQL数据表&#xff0c;在数据量比较大的情况下&#xff0c;主键不宜过长&#xff0c;是不是这样呢&#xff1f;这又是为什么呢&#xff1f;这个问题嘛&#xff0c;不能一概而论&#xff1a;(1)如果是In…

计算机有多少种开发语言,为什么现在会有这么多种编程语言?

21世纪&#xff0c;计算机的应用越来越多&#xff0c;为了适应各种使用场景&#xff0c;于是诞生了各种语言&#xff0c;不仅语言是多样的&#xff0c;每种语言下面都有不同的开发框架&#xff0c;框架也是多样的。有时候为了性能&#xff0c;可能会选择编译型语言&#xff0c;…

mysql是小型数据库_mysql小型数据库

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云数据库专家保驾护航&#xff0c;为用户…

计算机保护地阻值,机房接地系统的一般接地电阻要小于多少欧姆?

机房接地系统宜采用综合接地方案&#xff0c;综合接地电阻应小于1欧姆。机房接地系统&#xff1a;(1)机房有四种接地方式&#xff1a;交流工作地、安全保护地、直流工作地和防雷保护地。(2)信号系统和电源系统、高压系统和低压系统不应使用共地回路。(3)灵敏电路的接地应各自隔…

计算机丢失wpcap.dll会影响什么,Win7系统提示wpcap.dll丢失如何解决?

最近有Win7系统用户反映&#xff0c;打开程序或者玩游戏的过程中都会出现wpcap.dll丢失的提示&#xff0c;这直接导致了程序无法正常打开以及游戏无法正常运行&#xff0c;用户为此非常苦恼。那么&#xff0c;Win7系统提示wpcap.dll丢失如何解决呢&#xff1f;下面&#xff0c;…