`
_gougang
  • 浏览: 34704 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js实现table的排序

    博客分类:
  • js
 
阅读更多

 

 

 

    说明:通过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

    本资源“js 实现 table 行排序 TableOrder.rar”提供了一个实用的方法来实现这个功能。以下是对该实现的详细说明: 1. **HTML表格结构**: 在HTML中,`&lt;table&gt;`元素用于创建表格,`&lt;tr&gt;`表示表格行,`&lt;th&gt;`表示...

    js对Table排序经典

    在JavaScript(js)中,对HTML表格(Table)进行排序是一项常见的需求,特别是在网页交互和数据展示中。...在提供的"js对table的完整排序"文件中,应该包含了完整的实现代码,供学习者参考和实践。

    js 实现 table 行排序

    本篇文章将深入探讨如何使用 JavaScript 来实现表格数据的排序。 首先,我们需要了解 HTML `&lt;table&gt;` 的结构。一个简单的表格由 `&lt;table&gt;` 开始,包含多个 `&lt;tr&gt;`(行)元素,每个行中又有若干个 `&lt;td&gt;`(单元格)...

    js实现点击table表头字段带箭头标示

    综上所述,实现“点击table表头字段带箭头标示”的功能涉及到了JavaScript事件处理、DOM操作、数组排序以及UI交互设计。这不仅是提高用户体验的重要手段,也是前端开发者必备的技能之一。通过不断实践和学习,我们...

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

    总的来说,原生js table表格自动排序效果的实现涉及到HTML结构的理解、JavaScript事件处理、数组排序算法的运用以及DOM操作。这是一个实用的功能,通过学习和理解这个例子,可以提升我们对前端开发中数据处理和交互...

    豪华版js实现table动态排序

    7. **排序实现**:在排序函数中,根据用户点击的表头,确定排序依据(升序或降序)。然后,对数据数组进行排序,并同步更新表格的DOM结构,保持数据与视图的一致性。 8. **性能优化**:对于大量数据,直接操作DOM会...

    实现table排序(以备不时之需)

    本篇将围绕"实现table排序(以备不时之需)"这一主题,详细讲解如何利用jQuery及其插件来实现表格数据的动态排序。 首先,我们看到标签中提到了"源码"和"工具",这意味着我们将探讨一段具体的代码和可能使用的工具...

    js代码操作table排序功能

    本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先,我们要理解HTML表格的基本结构,它由`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;th&gt;`(表头)和`&lt;td&gt;`(单元格)组成。排序功能通常针对`&lt;th&gt;`元素,因为它们...

    sort.js实现table表单点击列名排序

    table列点击排序功能JS实现,表单table显示的时候,点击表单列名实现升序以及降序功能!

    table表头点击可实现排序

    在网页开发中,数据展示通常会使用表格(Table)元素,而为了使用户能更方便地浏览和理解数据,我们常常需要实现表头点击时自动排序的功能。这个功能的实现主要依赖于JavaScript,因为它提供了对DOM操作和事件监听的...

    javascript实现Table排序的方法

    JavaScript实现表格排序主要涉及以下知识点: 1. 获取表格对象:在JavaScript中,可以通过document.getElementById方法获取页面中的元素对象。比如,可以使用此方法获取一个表格(table)元素对象,这里以tblData...

    javascript Table排序

    本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先,我们需要理解HTML `&lt;table&gt;`元素的基本结构。一个表格由`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;th&gt;`(表头)和`&lt;td&gt;`(单元格)组成。在JavaScript中,我们...

    JavaScript html js Table排序

    程序的实现的是在客户端对表格进行排序,有以下特点: 1.自定义排序列、排序属性(例如innerHTML)、排序数据类型(包括int、float、date、string)、排序顺序(顺序和倒序); 2.自定义排序函数; 3.可同时设置...

    JavaScript实现表格排序

    这篇我们将深入探讨如何使用JavaScript实现表格排序,包括对数字、日期和汉字的排序。 首先,我们需要理解HTML表格的基本结构,通常由`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;th&gt;`(表头)和`&lt;td&gt;`(数据单元格)组成。为了...

    js-table-sorter(纯js实现点击表头排序)

    《js-table-sorter:纯JavaScript实现的表格头排序解析》 在Web开发中,数据的展示和处理是一项常见的任务,而表格(Table)是数据展示的常见方式之一。当表格中的数据量较大或者需要频繁更新时,用户通常期望能够...

    JavaScript实现表格排序,点击表头切换升序降序,非常简单

    在网页开发中,数据展示通常会使用到表格(Table)元素,而为了提供更好的用户体验,我们经常需要为表格添加排序功能。这篇教程将详细介绍如何使用JavaScript实现这一功能,让使用者可以点击表头来轻松切换升序或...

    html中table排序

    以下是一些关于“html中table排序”的关键知识点: 1. **静态排序**: - HTML的`&lt;table&gt;`标签提供了基本的表格结构,如`&lt;thead&gt;`(表头)、`&lt;tbody&gt;`(主体内容)、`&lt;tfoot&gt;`(表尾)等,但它们不具备排序功能。 ...

    JavaScript Table排序

    在这个实例中,我们将深入探讨JavaScript如何实现表格的动态排序。 首先,我们需要理解HTML表格的基本结构。一个HTML表格由`&lt;table&gt;`标签开始,包含若干行`&lt;tr&gt;`和单元格`&lt;td&gt;`。表头通常位于`&lt;thead&gt;`部分,而数据...

Global site tag (gtag.js) - Google Analytics