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）的宽度，并结合鼠标选中文字查询功能，为用户...