`
wcjy5128
  • 浏览: 16801 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

一个修改后的js表格排序函数

阅读更多
看了一些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]
0
0
分享到:
评论
1 楼 dldahua 2011-07-19  
大虾,你这个方法有没有在IE7下有上百条记录的时候侧过?
我用的时候突然表格不见了 不解~~~

相关推荐

    JavaScript实现表格排序

    在实际项目中,还可以使用现有的库和框架,如jQuery的`tablesorter`插件,或者AngularJS、Vue.js等MVVM框架的内置指令,它们提供了更强大和灵活的表格排序功能。 总结起来,JavaScript实现表格排序涉及到对HTML表格...

    js学习案例实现一个完整的表格排序

    这个"js学习案例实现一个完整的表格排序"旨在帮助开发者理解和掌握如何使用纯JavaScript实现对HTML表格的数据进行动态排序。在这个项目中,我们将探讨以下关键知识点: 1. **HTML表格基础**:首先,了解HTML中的`...

    原生js table表格自动排序效果

    在给定的资源中,“原生js table表格自动排序效果”提供了一个无需依赖任何外部库(如jQuery或lodash)的解决方案。下面我们将详细探讨这个功能的实现原理和相关知识点。 首先,`index.html`文件是网页的结构部分,...

    javaScript对表格自动排序

    排序函数通常会接收一个比较函数作为参数,这个函数定义了两个元素的比较规则。对于表格,我们可以比较单元格的文本内容或数值。以下是一个基本的升序排序函数: ```javascript function sortTable(columnIndex, ...

    Javascript表格排序大全

    【标题】"Javascript表格排序大全"所涉及的知识点主要集中在JavaScript的前端开发技术上,特别是与数据处理和用户界面交互相关的部分。JavaScript是一种轻量级的脚本语言,广泛应用于网页和应用程序,其中表格排序是...

    jQuery Table表格排序显示代码.zip

    通常,可以将排序逻辑封装为一个函数,以便在需要时调用。 10. **资源文件**:提供的"说明.htm"可能是教程文档,介绍如何使用和定制这个排序功能。"jiaoben4920"可能是一个示例脚本或CSS样式文件,配合HTML表格一同...

    js高级表格排序 教程&使用方法

    总结来说,实现JavaScript表格排序主要涉及以下几个步骤: 1. 给表格添加ID和事件处理器。 2. 编写`sortTable`函数,处理数据类型转换和排序逻辑。 3. 使用文档碎片优化DOM操作。 4. 针对非文本类型的数据,如图片,...

    jsp页面表格排序 js文件

    在这个场景下,我们关注的是`jsp页面表格排序 js文件`,这通常涉及到前端JavaScript技术,用于实现表格数据的客户端排序,而无需每次用户点击列头时都向服务器发送请求。 `jsp页面表格排序 js文件`的核心在于...

    jQuery表格插件仿Excel表格排序修改效果

    在本主题“jQuery表格插件仿Excel表格排序修改效果”中,我们将深入探讨如何利用jQuery实现类似Excel的表格排序功能,并对其进行优化和定制。 首先,我们需要了解jQuery表格插件的基础。常见的jQuery表格插件有...

    js表格排序

    JavaScript表格排序是一个常见的需求,特别是在网页交互式数据展示中。这个话题主要涵盖了如何使用JavaScript来实现对HTML表格数据的动态排序。在这个过程中,我们将探讨以下几个关键知识点: 1. **HTML表格结构**...

    Jquery表格排序

    在网页开发中,jQuery是一个非常...总结,jQuery表格排序是一个实用的功能,通过插件或者自定义代码,可以为用户提供友好的数据浏览体验。在实际开发中,应根据项目需求选择合适的方法,并注重性能优化和用户体验设计。

    javascript表格排序(顺序和逆序)并高亮显示

    总结来说,实现JavaScript表格排序并高亮显示的关键在于理解DOM操作、数组排序以及CSS样式的应用。通过编写比较函数、遍历和排序表格行,以及更新单元格样式,我们可以创建出具有动态排序和高亮功能的表格。这个过程...

    TinyTable 简单实用的JS表格分页及排序插件

    这款插件设计简洁,易于使用,对于那些不需要大型表格处理库,但又希望提升用户体验的开发者来说,是一个理想的解决方案。 一、TinyTable基本概念与特点 1. 轻量级:TinyTable的体积小,加载速度快,对页面性能的...

    点击表格表头排序 一个国外收费js控件

    标题中的“点击表格表头排序 一个国外收费js控件”指的是一个JavaScript库或插件,主要用于实现网页中表格数据的动态排序功能。用户只需点击表格的列头,即可按照该列的数据进行升序或降序排列。这种控件通常包含一...

    一个表格排序程序

    3. **JavaScript**:`tablesort.js` 文件是核心部分,它实现了表格排序的功能。JavaScript是一种客户端脚本语言,用于增加网页的交互性。这个文件可能包含以下关键知识点: - 事件监听:通过监听用户的点击事件,当...

    xml+xslt + js表格排序

    标题中的“XML+XSLT+JS表格排序”是一个关于数据处理和前端展示技术的组合。这个主题涉及到三个主要的技术: 1. **XML (Extensible Markup Language)**:XML是一种标记语言,用于存储和传输结构化数据。在本案例中...

    js表格操作,DOM实现数据动态增删查改

    通过以上步骤,你可以实现一个基本的基于DOM的JavaScript表格数据操作系统。这个系统可以适应各种数据管理需求,为用户提供直观的界面和流畅的操作体验。在实际项目中,可能还需要处理更复杂的交互逻辑,如表单验证...

    js表格点击表头排序

    在JavaScript编程中,实现“js表格点击表头排序”是一个常见的功能需求,特别是在网页数据展示时,用户往往希望可以通过点击表头快速对数据进行升序或降序排列。本知识点将详细讲解如何在纯前端环境下,利用...

    js实现表格中列的排序

    通过以上步骤,我们可以实现一个灵活、可复用的JavaScript表格列排序功能。这个功能对于提升用户体验、增强数据可读性具有重要作用,尤其在数据密集型的Web应用中。在实际项目中,还可以进一步扩展,如支持多列排序...

Global site tag (gtag.js) - Google Analytics