function ieOrFireFox(ob)
{
if (ob.textContent != null)
return ob.textContent;
var s = ob.innerText;
return s.substring(0, s.length);
}
//排序 tableId: 表的id,iCol:第几列 ;dataType:iCol对应的列显示数据的数据类型
function sortAble(tableId, iCol, dataType) {
var table = document.getElementById(tableId);
var tbody = table.tBodies[0];
var colRows = tbody.rows;
var aTrs = new Array;
//将将得到的列放入数组,备用
for (var i=0; i < colRows.length; i++) {
aTrs[i] = colRows[i];
}
//判断上一次排列的列和现在需要排列的是否同一个。
if (table.sortCol == iCol) {
aTrs.reverse();
} else {
//如果不是同一列,使用数组的sort方法,传进排序函数
aTrs.sort(compareEle(iCol, dataType));
}
var oFragment = document.createDocumentFragment();
for (var i=0; i < aTrs.length; i++) {
oFragment.appendChild(aTrs[i]);
}
tbody.appendChild(oFragment);
//记录最后一次排序的列索引
table.sortCol = iCol;
}
//将列的类型转化成相应的可以排列的数据类型
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();
}
}
//排序函数,iCol表示列索引,dataType表示该列的数据类型
function compareEle(iCol, dataType) {
return function (oTR1, oTR2) {
var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);
var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);
if (vValue1 < vValue2) {
return -1;
} else if (vValue1 > vValue2) {
return 1;
} else {
return 0;
}
};
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script src="D:/IDE/sortable.js" type="text/javascript"></script>
</HEAD>
<BODY>
<p>Sortable demo:</p>
<table border="1" id="tableId">
<thead>
<tr>
<th onclick="sortAble('tableId', 0)"
style="cursor:pointer">name</th>
<th onclick="sortAble('tableId', 1, 'date')"
style="cursor:pointer">Birthday</th>
<th onclick="sortAble('tableId', 2, 'int')"
style="cursor:pointer">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ozone</td>
<td>01/12/1982</td>
<td>25</td>
</tr>
<tr>
<td>OnlyBlue3</td>
<td>10/24/1983</td>
<td>23</td>
</tr>
<tr>
<td>Momo</td>
<td>10/14/1999</td>
<td>8</td>
</tr>
</tbody>
</table>
</BODY>
</HTML>
分享到:
相关推荐
在JavaScript编程中,实时修改表格(Table)数据是一项常见的需求,特别是在动态网页应用中。这里我们将深入探讨如何使用JavaScript,结合Ajax和JSON技术,来实现这一功能。 首先,我们需要了解HTML表格的基本结构...
在JavaScript中实现表格(Table)行排序是一种常见的需求,特别是在数据可视化和用户交互丰富的Web应用中。本资源“js 实现 table 行排序 TableOrder.rar”提供了一个实用的方法来实现这个功能。以下是对该实现的...
在JavaScript中,对HTML表格(`<table>`)进行排序是一项常见的需求,特别是在动态数据展示和用户交互的应用中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先,我们要理解HTML表格的基本结构,...
本文将详细介绍如何使用JavaScript(JS)来实现表格(table)数据的分页效果,分为两个部分进行讲解。 ### 第一部分:简单分页 这个部分主要实现的是基础的页数翻页功能。首先,我们需要一个包含表格数据的HTML...
在JavaScript(JS)开发中,有时我们需要从Excel文件中读取数据并将其显示在网页的HTML表格(table)中。这个过程通常涉及到几个关键步骤,包括文件读取、数据解析和表格渲染。以下是对这个过程的详细解释: 1. **...
4. **列映射**:有时,JSON数据的键可能与表格列名不匹配,或者需要对某些字段进行特殊处理。为此,库提供了列映射功能,允许你指定JSON字段与表格列的对应关系,以及自定义转换函数。 5. **事件处理**:为了增加...
jQuery通过简洁的API让JavaScript编程变得更加容易,如$(document).ready()用于页面加载完成后执行代码,$('selector')用于选择DOM元素,以及$.ajax()用于处理异步请求。 2. **表格(Table)操作**:在HTML中,表格...
6. **不参与排序的列**:某些列可能包含非排序数据,如操作按钮或图片。通过标记这些列,可以在排序时跳过它们,确保排序不影响这些内容。 7. **排序实现**:在排序函数中,根据用户点击的表头,确定排序依据(升序...
JavaScript表格排序是一个常见的需求,特别是在网页中展示数据时。它允许用户通过点击表头来对数据进行升序或降序排列。在这个实例中,我们将深入探讨JavaScript如何实现表格的动态排序。 首先,我们需要理解HTML...
在JavaScript开发中,有时我们需要将HTML表格的数据导出为Excel文件,以便用户可以方便地存储和处理数据。本文将深入探讨如何使用JavaScript、jQuery和HTML来实现这一功能,特别是通过JavaScript操作HTML表格来生成...
在JavaScript中,动态修改HTML表格(Table)的内容是一项常见的任务,尤其在网页交互和数据展示时。本篇文章将深入探讨如何使用JavaScript实现这一功能,包括选择表格元素、获取和设置单元格内容,以及监听事件来...
6. **与其他 Bootstrap Table 功能的集成**:`bootstrap-table-editable.js` 能够与 Bootstrap Table 的其他功能无缝集成,比如排序、过滤、分页等,为用户提供完整的数据管理体验。 在 `GridEdit.rar` 文件中,...
8. **分页处理**: 由于描述中提到"只对当前页面数据排序",这意味着分页逻辑可能已经存在,但不在提供的代码段中展示。通常,分页需要维护一个页码和每页显示条目数的概念,根据用户的选择动态加载或更新表格内容。 ...
在描述中提到的"点击表头进行排序操作",通常通过JavaScript来实现,这涉及到事件监听和数据处理。 `script.js`和`packed.js`是JavaScript文件,它们可能包含了实现表格排序的逻辑。JavaScript可以为每个表头单元格...
在HTML中,你需要创建一个`<table>`元素,并通过layui的JS代码对其进行初始化。例如: ```html <table id="demo" lay-filter="test"></table> ``` 然后,在JavaScript部分,你可以使用layui的API来设置表格的数据...
在JavaScript中将HTML表格数据导出到Excel是常见的需求,特别是在网页交互中处理大量数据时。这个过程涉及到几个关键步骤,包括数据获取、格式转换以及文件下载触发。在这个实例中,我们将探讨如何实现这一功能,...
- **动态加载与排序**:JS可以实现数据的异步加载,减少页面加载时间。同时,可以添加排序功能,让用户根据需要对数据进行升序或降序排列。 - **筛选与搜索**:通过JavaScript,用户可以输入关键词来筛选表格中的...
在网页设计中,JavaScript(JS)是一种常用的客户端脚本语言,用于增强用户的交互体验和动态更新页面内容。本文将深入探讨如何使用JavaScript手动改变HTML表格(table)的宽度,并结合鼠标选中文字查询功能,为用户...