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;
}
}
html：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>简易表格排序</title>
<link rel="stylesheet" href="sort.css" type="text/css">
<script type="text/javascript" src="tableSort.js"></script>
<script type="text/javascript">
var turn = true;
</script>
</head>
<body>
<table border="1" width="400" id="sortTable" align="center">
<thead>
<tr id="head">
<th onclick="new sortTable('sortTable','0','string',event)">姓名</th>
<th onclick="new sortTable('sortTable','1','string',event)">性别</th>
<th onclick="new sortTable('sortTable','2','int',event)">年龄</th>
<th onclick="new sortTable('sortTable','3','date',event)">生日</th>
</tr>
</thead>
<tbody id="body">
<tr>
<td>陈超</td>
<td>男</td>
<td>21</td>
<td>1988-8-18</td>
</tr>
<tr>
<td>小陈</td>
<td>女</td>
<td>18</td>
<td>1989-3-18</td>
</tr>
<tr>
<td>小徐</td>
<td>女</td>
<td>28</td>
<td>1989-3-22</td>
</tr>
<tr>
<td>小猪</td>
<td>男</td>
<td>12</td>
<td>2000-8-19</td>
</tr>
<tr>
<td>重庆</td>
<td>男</td>
<td>20</td>
<td>2000-8-18</td>
</tr>
</tbody>
</table>
</body>
</html>
分享到：
相关推荐
在网页开发中，数据展示通常会使用到表格（Table）元素，而为了提供更好的用户体验，我们经常需要在用户交互时实现表格数据的动态排序，即表格排序功能。本示例"javascript页面表格实现不刷新排序的例子"正是针对这...
总之，通过纯j实现HTML表格排序，我们可以利用JavaScript的强大功能增强网页的交互性，提供更好的用户体验。这个例子展示了如何结合HTML和JavaScript来创建一个动态排序的表格，但也可以根据实际需求进行扩展和优化...
jquery-tablesort则是一个独立于jQuery的表格排序库，它提供了类似的功能，但不依赖于jQuery。这意味着如果你的项目不使用jQuery或者希望减少依赖，这个库是个不错的选择。jquery-tablesort同样支持多种数据类型的...
《表格排序插件详解及其应用》 在网页开发中，数据展示往往离不开表格。而当表格数据量较大或者需要频繁进行动态排序时，一个高效、易用的表格排序插件就显得尤为重要。本文将深入探讨“表格排序插件”，特别是以...
总结起来，这个JavaScript表格排序示例展示了如何通过监听表头点击事件，使用纯JavaScript实现表格数据的动态排序。它依赖于HTML表格结构，通过JavaScript操作DOM节点进行数据比较和位置交换。在实际项目中，可以...
在JavaScript编程中，实现带箭头的表格排序是一种常见的需求，尤其在数据展示和交互式网页设计中。本文将深入探讨如何使用JavaScript实现这一功能，包括理解基础的HTML表格结构、CSS样式设置以及JavaScript事件处理...
自定义表格排序功能意味着用户可以根据需要对表格中的数据进行升序或降序排列，而不仅仅是依赖于浏览器的默认排序。本篇文章将深入探讨如何使用 JavaScript 来实现自定义表格排序。 首先，我们需要理解表格的基本...
在这个“MFC表格例子.rar”压缩包中，包含了一个利用MFC实现的简单表格应用，展示了如何在C++环境中创建和编辑表格控件。下面将详细探讨MFC表格控件的使用方法及其在实际应用中的价值。 MFC中的表格控件通常指的是...
在JavaScript的世界里，实现表格（table）数据的自动排序是一项常见的需求。这通常涉及到对HTML DOM的操作以及数据处理。在给定的资源中，“原生js table表格自动排序效果”提供了一个无需依赖任何外部库（如jQuery...
这个例子提供了6种不同的方法来实现这一功能，对于理解并掌握如何在各种场景下进行数据排序大有裨益。下面，我们将深入探讨这6种表格脚本排序的方式，并分析它们的适用场景和优缺点。 1. **JavaScript原生排序**： ...
总结来说，这个jQuery表格排序的例子展示了如何使用纯JavaScript（而非依赖特定插件）实现一个基本的表格排序功能。通过点击表头，可以对表格数据进行升序或降序排列。同时，通过添加CSS样式和JavaScript逻辑，可以...
一个关于EXTJs 表格 中文排序的例子
<title>JavaScript表格排序 table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; } th { cursor: pointer; } (0)">...
这次的例子，只是把Nicholas C .Zakas的例子理解了一下，代码是在学习表格排序时的Demo. 单个数据类型的排序比较简单，他这个例子的特别之处在于能兼容多种数据类型的排序。例子 很简单，但 排序的主方法，有三个...
在JavaScript的世界里，表格排序是一项常见的需求，尤其是在数据展示和用户交互中。本文将深入探讨“JS:表格排序”这一主题，结合标签“源码”和“工具”，我们将重点解析如何利用JavaScript实现表格数据的排序功能...
在这个例子中，它包含了一个表格用于展示数据，一个分页导航栏，以及可能的搜索和排序输入框。HTML代码通常会包含数据的占位符，实际数据显示则是通过JavaScript动态填充的。 接着，`js`文件包含了项目的JavaScript...
在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...
在网页开发中，实现表格列的自由拖动排序是一个增强用户体验的重要特性。这款"表格列自由拖动排序js代码"提供了这样一个功能，允许用户通过单击并长按表格的列头来自由移动列的位置，从而根据需要调整表格的布局。...
首先，表格排序是电子表格软件（如Microsoft Excel、Google Sheets、LibreOffice Calc等）中的一个基础功能，允许用户根据一列或多列的数据对整个表格进行重新排列。这种操作可以帮助我们快速定位特定数据，或者以...