看了一些JavaScript写的表格排序函,都很复杂,这个稍微简单一些,自己做了一些修改,加上了样式,但是感觉有些地方还是没有写好,不太会了。
[size=medium][color=blue][b]
function $(id) {
return (typeof(id)=="string")?document.getElementById(id):id;
}
//传递参数为表格的ID,列号,该列的数据类型
var sortTable = function(id,colNum,DataType,event){
this.event = event;
this.table = $(id); //得到要排序的表格
this.firstRow = this.table.rows[0]; //得到表格的第一行 也就是标题
this.firstCells = this.firstRow.cells; //得到表格的每一个单元格
this.colNum = colNum; //排序的列
this.DataType = DataType; //数据类型
this.tbody = this.table.tBodies[0]; //得到表格的内容 非表头
this.rows = this.tbody.rows; //内容的行数
this.downClass = "down"; //降序排序时表头的样式
this.upClass = "up"; //升序排序时表头的样式
this.trArray = new Array; //存放每一行的内容
this.defaultClass = "";
this.format(); //将表格数据装到数组中
}
sortTable.prototype = {
//将表格数据格式化到数组中
format:function() {
for(var i=0;i<this.rows.length;i++) {
this.trArray[i] = this.rows[i];
}
this.judge();
},
//判断是否是上一次排序的列
judge:function() {
var tag = "";
for(var i=0;i<this.firstCells.length;i++) {
if(i == this.colNum) {
tag = this.firstCells[i];
if(turn) {
this.addClass(tag,this.upClass);
turn = false;
} else {
this.addClass(tag,this.downClass);
turn = true;
}
} else {
this.addClass(this.firstCells[i],"");
}
}
if(this.table.index == this.colNum) {
this.trArray.reverse();
} else {
//调用排序函数 传递参数 升序或者降序
this.trArray.sort(this.getcreateSort(this.colNum,this.DataType));
}
this.createDom();
},
//创建转换过程
getcreateSort:function(colNum,datatype) {
return function createSort(a,b) {
var first = a.cells[colNum].firstChild.nodeValue;
var second = b.cells[colNum].firstChild.nodeValue;
var value1 = convert(first,datatype);
var value2 = convert(second,datatype);
if(value1 < value2) {
return -1;
} else if(value1 > value2) {
return 1;
} else {
return 0;
}
};
function convert(value,type) {
switch(type) {
case "int":return parseInt(value);break;
case "float":return parseFloat(value);break;
case "string":return value.toString();break;
case "data":return new Date(Date.parse(value));break;
default:return value.toString();break;
}
}
},
createDom:function() {
var frag = document.createDocumentFragment();
for(var i=0;i<this.trArray.length;i++) {
frag.appendChild(this.trArray[i]);
}
this.tbody.appendChild(frag);
this.table.index = this.colNum; //用作后面判断用
},
addClass:function(obj,classname) {
obj.className = classname;
}
}
[/b][/color][/size]
分享到:
相关推荐
在实际项目中,还可以使用现有的库和框架,如jQuery的`tablesorter`插件,或者AngularJS、Vue.js等MVVM框架的内置指令,它们提供了更强大和灵活的表格排序功能。 总结起来,JavaScript实现表格排序涉及到对HTML表格...
这个"js学习案例实现一个完整的表格排序"旨在帮助开发者理解和掌握如何使用纯JavaScript实现对HTML表格的数据进行动态排序。在这个项目中,我们将探讨以下关键知识点: 1. **HTML表格基础**:首先,了解HTML中的`...
在给定的资源中,“原生js table表格自动排序效果”提供了一个无需依赖任何外部库(如jQuery或lodash)的解决方案。下面我们将详细探讨这个功能的实现原理和相关知识点。 首先,`index.html`文件是网页的结构部分,...
排序函数通常会接收一个比较函数作为参数,这个函数定义了两个元素的比较规则。对于表格,我们可以比较单元格的文本内容或数值。以下是一个基本的升序排序函数: ```javascript function sortTable(columnIndex, ...
【标题】"Javascript表格排序大全"所涉及的知识点主要集中在JavaScript的前端开发技术上,特别是与数据处理和用户界面交互相关的部分。JavaScript是一种轻量级的脚本语言,广泛应用于网页和应用程序,其中表格排序是...
通常,可以将排序逻辑封装为一个函数,以便在需要时调用。 10. **资源文件**:提供的"说明.htm"可能是教程文档,介绍如何使用和定制这个排序功能。"jiaoben4920"可能是一个示例脚本或CSS样式文件,配合HTML表格一同...
总结来说,实现JavaScript表格排序主要涉及以下几个步骤: 1. 给表格添加ID和事件处理器。 2. 编写`sortTable`函数,处理数据类型转换和排序逻辑。 3. 使用文档碎片优化DOM操作。 4. 针对非文本类型的数据,如图片,...
在这个场景下,我们关注的是`jsp页面表格排序 js文件`,这通常涉及到前端JavaScript技术,用于实现表格数据的客户端排序,而无需每次用户点击列头时都向服务器发送请求。 `jsp页面表格排序 js文件`的核心在于...
在本主题“jQuery表格插件仿Excel表格排序修改效果”中,我们将深入探讨如何利用jQuery实现类似Excel的表格排序功能,并对其进行优化和定制。 首先,我们需要了解jQuery表格插件的基础。常见的jQuery表格插件有...
JavaScript表格排序是一个常见的需求,特别是在网页交互式数据展示中。这个话题主要涵盖了如何使用JavaScript来实现对HTML表格数据的动态排序。在这个过程中,我们将探讨以下几个关键知识点: 1. **HTML表格结构**...
在网页开发中,jQuery是一个非常...总结,jQuery表格排序是一个实用的功能,通过插件或者自定义代码,可以为用户提供友好的数据浏览体验。在实际开发中,应根据项目需求选择合适的方法,并注重性能优化和用户体验设计。
总结来说,实现JavaScript表格排序并高亮显示的关键在于理解DOM操作、数组排序以及CSS样式的应用。通过编写比较函数、遍历和排序表格行,以及更新单元格样式,我们可以创建出具有动态排序和高亮功能的表格。这个过程...
这款插件设计简洁,易于使用,对于那些不需要大型表格处理库,但又希望提升用户体验的开发者来说,是一个理想的解决方案。 一、TinyTable基本概念与特点 1. 轻量级:TinyTable的体积小,加载速度快,对页面性能的...
标题中的“点击表格表头排序 一个国外收费js控件”指的是一个JavaScript库或插件,主要用于实现网页中表格数据的动态排序功能。用户只需点击表格的列头,即可按照该列的数据进行升序或降序排列。这种控件通常包含一...
3. **JavaScript**:`tablesort.js` 文件是核心部分,它实现了表格排序的功能。JavaScript是一种客户端脚本语言,用于增加网页的交互性。这个文件可能包含以下关键知识点: - 事件监听:通过监听用户的点击事件,当...
标题中的“XML+XSLT+JS表格排序”是一个关于数据处理和前端展示技术的组合。这个主题涉及到三个主要的技术: 1. **XML (Extensible Markup Language)**:XML是一种标记语言,用于存储和传输结构化数据。在本案例中...
通过以上步骤,你可以实现一个基本的基于DOM的JavaScript表格数据操作系统。这个系统可以适应各种数据管理需求,为用户提供直观的界面和流畅的操作体验。在实际项目中,可能还需要处理更复杂的交互逻辑,如表单验证...
在JavaScript编程中,实现“js表格点击表头排序”是一个常见的功能需求,特别是在网页数据展示时,用户往往希望可以通过点击表头快速对数据进行升序或降序排列。本知识点将详细讲解如何在纯前端环境下,利用...
通过以上步骤,我们可以实现一个灵活、可复用的JavaScript表格列排序功能。这个功能对于提升用户体验、增强数据可读性具有重要作用,尤其在数据密集型的Web应用中。在实际项目中,还可以进一步扩展,如支持多列排序...