// 不同浏览器对象取值
function ieOrFireFox(obj) {
if (obj != null) {
if (obj.textContent != null)
return obj.textContent;
var txt = obj.innerText;
return txt.substring(0, txt.length);
} else
return "";
}
//将列的类型转化成相应的可以排列的数据类型
function convert(sValue, dataType) {
switch (dataType) {
case "int":
return parseInt(sValue);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
default:
return sValue.toString();
}
}
/**
* tableSort
* @param tableId 表的id
* @param cellIndex table列下标
* @param dataType 数据的数据类型
* @return
*/
function sort(tableId, cellIndex, dataType) {
var tableObj = document.getElementById(tableId);
var tbody = tableObj.tBodies[0];
var tabRows = tbody.rows;
var trArray = new Array;
//判断上一次排列的列和现在需要排列的是否同一个。
if (tableObj.sortCol == cellIndex) {
_arrays.reverse();
trArray = _arrays;
} else {
//将将得到的列放入数组,备用
//alert(tabRows.length);
var index = 0;
for ( var i = 0; i < tabRows.length; i++) {
var obj = tabRows[i];
if (obj != null && obj.attributes["type"] != null) {
if ("head" == obj.attributes["type"].value) {
// 提取表头行<tr type="head">
_tabHead = tabRows[i];
continue;
} else if ("foot" == obj.attributes["type"].value) {
// 提取分页标签行<tr type="foot">
_tabFoot = tabRows[i];
continue;
}
}
trArray[index] = tabRows[i];
index++;
}
//如果不属于同一列,传入排序函数
trArray.sort(compareEle(cellIndex, dataType));
_arrays = trArray;
}
var oFragment = document.createDocumentFragment();
for ( var i = 0; i < trArray.length; i++) {
oFragment.appendChild(trArray[i]);
}
/**
* 先移除页脚再执行添加(注意顺序)
*/
if (_tabFoot != null)
tbody.removeChild(_tabFoot);
tbody.appendChild(oFragment);
if (_tabFoot != null)
tbody.appendChild(_tabFoot);
//记录最后一次排序的列索引
tableObj.sortCol = cellIndex;
}
//排序函数,cellIndex表示列索引,dataType表示该列的数据类型
function compareEle(cellIndex, dataType) {
return function(oTR1, oTR2) {
var vValue1 = convert(ieOrFireFox(oTR1.cells[cellIndex]), dataType);
var vValue2 = convert(ieOrFireFox(oTR2.cells[cellIndex]), dataType);
if (vValue1 < vValue2) {
return -1;
} else if (vValue1 > vValue2) {
return 1;
} else {
return 0;
}
};
}
// 局部变量
var _arrays = new Array;
var _tabHead = null, _tabFoot = null;
分享到:
相关推荐
本资源“js 实现 table 行排序 TableOrder.rar”提供了一个实用的方法来实现这个功能。以下是对该实现的详细说明: 1. **HTML表格结构**: 在HTML中,`<table>`元素用于创建表格,`<tr>`表示表格行,`<th>`表示...
在JavaScript(js)中,对HTML表格(Table)进行排序是一项常见的需求,特别是在网页交互和数据展示中。...在提供的"js对table的完整排序"文件中,应该包含了完整的实现代码,供学习者参考和实践。
本篇文章将深入探讨如何使用 JavaScript 来实现表格数据的排序。 首先,我们需要了解 HTML `<table>` 的结构。一个简单的表格由 `<table>` 开始,包含多个 `<tr>`(行)元素,每个行中又有若干个 `<td>`(单元格)...
综上所述,实现“点击table表头字段带箭头标示”的功能涉及到了JavaScript事件处理、DOM操作、数组排序以及UI交互设计。这不仅是提高用户体验的重要手段,也是前端开发者必备的技能之一。通过不断实践和学习,我们...
总的来说,原生js table表格自动排序效果的实现涉及到HTML结构的理解、JavaScript事件处理、数组排序算法的运用以及DOM操作。这是一个实用的功能,通过学习和理解这个例子,可以提升我们对前端开发中数据处理和交互...
7. **排序实现**:在排序函数中,根据用户点击的表头,确定排序依据(升序或降序)。然后,对数据数组进行排序,并同步更新表格的DOM结构,保持数据与视图的一致性。 8. **性能优化**:对于大量数据,直接操作DOM会...
本篇将围绕"实现table排序(以备不时之需)"这一主题,详细讲解如何利用jQuery及其插件来实现表格数据的动态排序。 首先,我们看到标签中提到了"源码"和"工具",这意味着我们将探讨一段具体的代码和可能使用的工具...
本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先,我们要理解HTML表格的基本结构,它由`<table>`、`<tr>`(行)、`<th>`(表头)和`<td>`(单元格)组成。排序功能通常针对`<th>`元素,因为它们...
table列点击排序功能JS实现,表单table显示的时候,点击表单列名实现升序以及降序功能!
在网页开发中,数据展示通常会使用表格(Table)元素,而为了使用户能更方便地浏览和理解数据,我们常常需要实现表头点击时自动排序的功能。这个功能的实现主要依赖于JavaScript,因为它提供了对DOM操作和事件监听的...
JavaScript实现表格排序主要涉及以下知识点: 1. 获取表格对象:在JavaScript中,可以通过document.getElementById方法获取页面中的元素对象。比如,可以使用此方法获取一个表格(table)元素对象,这里以tblData...
本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先,我们需要理解HTML `<table>`元素的基本结构。一个表格由`<table>`、`<tr>`(行)、`<th>`(表头)和`<td>`(单元格)组成。在JavaScript中,我们...
程序的实现的是在客户端对表格进行排序,有以下特点: 1.自定义排序列、排序属性(例如innerHTML)、排序数据类型(包括int、float、date、string)、排序顺序(顺序和倒序); 2.自定义排序函数; 3.可同时设置...
这篇我们将深入探讨如何使用JavaScript实现表格排序,包括对数字、日期和汉字的排序。 首先,我们需要理解HTML表格的基本结构,通常由`<table>`、`<tr>`(行)、`<th>`(表头)和`<td>`(数据单元格)组成。为了...
《js-table-sorter:纯JavaScript实现的表格头排序解析》 在Web开发中,数据的展示和处理是一项常见的任务,而表格(Table)是数据展示的常见方式之一。当表格中的数据量较大或者需要频繁更新时,用户通常期望能够...
在网页开发中,数据展示通常会使用到表格(Table)元素,而为了提供更好的用户体验,我们经常需要为表格添加排序功能。这篇教程将详细介绍如何使用JavaScript实现这一功能,让使用者可以点击表头来轻松切换升序或...
以下是一些关于“html中table排序”的关键知识点: 1. **静态排序**: - HTML的`<table>`标签提供了基本的表格结构,如`<thead>`(表头)、`<tbody>`(主体内容)、`<tfoot>`(表尾)等,但它们不具备排序功能。 ...
在这个实例中,我们将深入探讨JavaScript如何实现表格的动态排序。 首先,我们需要理解HTML表格的基本结构。一个HTML表格由`<table>`标签开始,包含若干行`<tr>`和单元格`<td>`。表头通常位于`<thead>`部分,而数据...