`
darkma
  • 浏览: 527518 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类

Js 实现 table 排序

阅读更多

// 不同浏览器对象取值
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

    本资源“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