说明:通过js实现table的排序,sortCol 是table的一个自定义属性
var k=0;
var aTRsOrg=new Array();
/****************************************************************************
排序的主方法,有三个形参,STableTd,iCol,sDataType分别为需要排序的表格ID,
需要排序的表格列号,所在列的数据类型(支持int,float,date,string四种数据类型)
**************************************************************************/
function sortTable(sTableId,iCol,sDataType)
{
var oTable=document.getElementById(sTableId);//获取表格的ID
var oTbody=oTable.tBodies[0]; //获取表格的tbody
var colDataRows=oTbody.rows; //获取tbody里的所有行的引用
var aTRs=new Array(); //定义aTRs数组用于存放tbody里的行
for(var i=0;i<colDataRows.length;i++) //依次把所有行放如aTRs数组
{
aTRs.push(colDataRows[i]);
}
/**//***********************************************************************
sortCol属性是额外给table添加的属性,用于作顺反两种顺序排序时的判断,区分
首次排序和后面的有序反转
************************************************************************/
if(k=="0"){
for(var i=0;i<colDataRows.length;i++) //依次把所有行放如aTRs数组
{
aTRsOrg.push(colDataRows[i]);
}
k="1";
}
if(oTable.getAttribute('sortCol')=="0") //默认排序
{
aTRs = aTRsOrg
oTable.attributes["sortCol"].nodeValue="1";
}
else if(oTable.getAttribute('sortCol')=="1") //升序
{
aTRs.sort(generateCompareTRs(iCol,sDataType));
oTable.attributes["sortCol"].nodeValue="2";
}
else if(oTable.getAttribute('sortCol')=="2")//降序
{
aTRs.sort(generateCompareTRs1(iCol,sDataType));
oTable.attributes["sortCol"].nodeValue="0";
}
var oFragment=document.createDocumentFragment(); //创建文档碎片
for(var i=0;i<aTRs.length;i++) //把排序过的aTRs数组成员依次添加到文档碎片
{
if(oTable.getAttribute('sortCol')=="2"){
oFragment.appendChild(aTRs[i]);
}else if(oTable.getAttribute('sortCol')=="1"){
oFragment.appendChild(aTRs[i]);
}else if(oTable.getAttribute('sortCol')=="0"){
oFragment.appendChild(aTRs[i]);
}
}
oTbody.appendChild(oFragment); //把文档碎片添加到tbody,完成排序后的显示更新
//把当前列号赋值给sortCol,以此来区分首次排序和非首次排序,//sortCol的默认值为-1
};
//比较函数,用于两项之间的排序
//升序
function generateCompareTRs(iCol,sDataType)
{
return function compareTRs(oTR1,oTR2)
{
var vValue1=convert(getText(oTR1,iCol),sDataType);
var vValue2=convert(getText(oTR2,iCol),sDataType);
if(vValue1<vValue2)
{
return -1;
}
else if(vValue1>vValue2)
{
return 1;
}
else
{
return 0;
}
};
};
//降序
function generateCompareTRs1(iCol,sDataType)
{
return function compareTRs(oTR1,oTR2)
{
var vValue1=convert(getText(oTR1,iCol),sDataType);
var vValue2=convert(getText(oTR2,iCol),sDataType);
if(vValue1>vValue2)
{
return -1;
}
else if(vValue1<vValue2)
{
return 1;
}
else
{
return 0;
}
};
};
//数据类型转换函数
function convert(sValue,sDataType)
{
if(sDataType=="date"){
sValue = trim(sValue);
}
switch(sDataType)
{
case "int":return parseInt(sValue);
case "float": return parseFloat(sValue);
case "date":return new Date(Date.parse(sValue));
default:return sValue.toString();
}
};
function trim(obj){
//return obj.replace(/(^\s*)|(\s*$)/g, "");
return obj.replace("-","/");
}
function getRootPath(){
var strFullPath=window.document.location.href;
var strPath=window.document.location.pathname;
var pos=strFullPath.indexOf(strPath);
var prePath=strFullPath.substring(0,pos);
var postPath=strPath.substring(0,strPath.substr(1).indexOf('/')+1);
return postPath;
}
//判断是否是IE
function isIE(){
if(navigator.userAgent.indexOf("MSIE")>0) {
return true;
}
return false;
}
function getText(obj,iCol){
if(isIE()){
return obj.cells[iCol].firstChild.innerText;
}else{
return obj.cells[iCol].firstChild.textContent;
}
}
分享到:
相关推荐
本资源“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>`部分,而数据...