javascript操作表格排序
来源：misc.blogjava.net
表格排序，一般的处理方法是传递排序的字段到后台进行重新查询并排序，javascript也可以做到简单的表格排序，备忘代码：
<html>
<head>
<title>Table Sort Example</title>
<script type="text/javascript">...
//转换器，将列的字段类型转换为可以排序的类型：String,int,float
function convert(sValue, sDataType) ...{
switch(sDataType) ...{
case "int":
return parseInt(sValue);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
default:
return sValue.toString();
}
}
//排序函数产生器，iCol表示列索引，sDataType表示该列的数据类型
function generateCompareTRs(iCol, sDataType) ...{
return function compareTRs(oTR1, oTR2) ...{
var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
if (vValue1 < vValue2) ...{
return -1;
} else if (vValue1 > vValue2) ...{
return 1;
} else ...{
return 0;
}
};
}
//排序方法
function sortTable(sTableID, iCol, sDataType) ...{
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTRs = new Array;
//将所有列放入数组
for (var i=0; i < colDataRows.length; i++) ...{
aTRs[i] = colDataRows[i];
}
//判断最后一次排序的列是否与现在要进行排序的列相同，是的话，直接使用reverse()逆序
if (oTable.sortCol == iCol) ...{
aTRs.reverse();
} else ...{
//使用数组的sort方法，传进排序函数
aTRs.sort(generateCompareTRs(iCol, sDataType));
}
var oFragment = document.createDocumentFragment();
for (var i=0; i < aTRs.length; i++) ...{
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
//记录最后一次排序的列索引
oTable.sortCol = iCol;
}
</script>
</head>
<body>
<p>Click on the table header to sort in ascending order.</p>
<table border="1" id="tblSort">
<thead>
<tr>
<th onclick="sortTable('tblSort', 0)"
style="cursor:pointer">Last Name</th>
<th onclick="sortTable('tblSort', 1)"
style="cursor:pointer">First Name</th>
<th onclick="sortTable('tblSort', 2, 'date')"
style="cursor:pointer">Birthday</th>
<th onclick="sortTable('tblSort', 3, 'int')"
style="cursor:pointer">Siblings</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>7/12/1978</td>
<td>2</td>
</tr>
<tr>
<td>Johnson</td>
<td>Betty</td>
<td>10/15/1977</td>
<td>4</td>
</tr>
<tr>
<td>Henderson</td>
<td>Nathan</td>
<td>2/25/1949</td>
<td>1</td>
</tr>
<tr>
<td>Williams</td>
<td>James</td>
<td>7/8/1980</td>
<td>4</td>
</tr>
<tr>
<td>Gilliam</td>
<td>Michael</td>
<td>7/22/1949</td>
<td>1</td>
</tr>
<tr>
<td>Walker</td>
<td>Matthew</td>
<td>1/14/2000</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
分享到：
相关推荐
而JavaScript实现的表格排序功能则能够帮助用户更方便地管理和理解这些数据。这篇我们将深入探讨如何使用JavaScript实现表格排序，包括对数字、日期和汉字的排序。 首先，我们需要理解HTML表格的基本结构，通常由`...
本文实例讲述了javascript操作表格排序的方法。分享给大家供大家参考。具体如下： 完整例子如下： <html> <head> <title>Table Sort Example</title> [removed] //转换器，将列的字段...
总结起来，这个JavaScript表格排序示例展示了如何通过监听表头点击事件，使用纯JavaScript实现表格数据的动态排序。它依赖于HTML表格结构，通过JavaScript操作DOM节点进行数据比较和位置交换。在实际项目中，可以...
<title>JavaScript表格排序 table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; } th { cursor: pointer; } (0)">...
JavaScript 表格排序双击可进行按表格列排序
JavaScript 实现表格排序是网页开发中的常见需求...总结来说，JavaScript 实现表格排序涉及到了事件处理、数据排序算法、DOM 操作以及用户体验设计等多个方面。掌握这些技术可以帮助我们构建更加高效、易用的网页应用。
总的来说，JavaScript中的`sort()`方法和`localeCompare()`函数是实现表格排序的关键工具，但需要配合自定义的比较函数和数据转换策略，以适应不同类型的表格数据。理解这些概念并正确应用它们，可以帮助我们构建出...
下面我们将深入探讨如何使用JavaScript实现表格排序功能。 一、HTML表格基础 在HTML中，`<table>`元素用于创建表格，`<tr>`表示表格行，`<th>`表示表头单元格，`<td>`表示数据单元格。例如： ```html 姓名 ...
JavaScript表格排序大全是一个涵盖多种JS表格排序实现方法的资源集合，旨在帮助开发者快速实现动态、交互式的表格数据排序功能。在网页开发中，表格是一种常用的数据展示方式，而JavaScript能够为表格提供强大的交互...
javascript动态排序表格 javascript动态排序表格 javascript动态排序表格 javascript动态排序表格
总的来说，使用JavaScript实现的页面表格排序功能，不仅可以提高用户体验，还可以减少服务器负载，因为它是在客户端完成的，无需每次排序都向服务器发送请求。这个例子是JavaScript在网页交互设计中的一个典型应用，...
四、表格排序 对于表格，我们可以扩展以上方法，监听单元格的拖放事件。在`drop`事件中，不仅要更新单元格的顺序，还要调整相关行的顺序。这可能涉及到对表格数据的重新排序，尤其是当数据与后端同步时。 五、优化...
在JavaScript编程中，实现带箭头的表格排序是一种常见的需求，尤其在数据展示和交互式网页设计中。本文将深入探讨如何使用JavaScript实现这一功能，包括理解基础的HTML表格结构、CSS样式设置以及JavaScript事件处理...
JavaScript表格排序是一个在网页开发中常见的需求，尤其是在处理大量数据时。这个功能强大的JavaScript库，被称为"sorttable"，能够帮助开发者轻松实现表格数据的排序，同时提供了自定义排序规则的能力，大大增强了...
JavaScript作为前端开发中不可或缺的语言，常被用来实现各种动态交互效果，包括表格排序。本文旨在介绍如何使用JavaScript实现表格排序的方法。 ### 知识点1：JavaScript排序算法的选择 实现表格排序的关键在于...
在探讨“javascript表格操作”的知识点时，我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素，包括但不限于创建、删除行或单元格，以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...
这个轻量级的JavaScript表格排序实现非常实用，特别适合小型项目或对性能要求高的场景。它可以避免引入大型库的开销，同时也易于理解和维护。当然，对于更复杂的需求，例如处理日期或对象排序，可能需要进一步扩展这...
### jQuery 实现表格排序 #### 知识点一：jQuery表格排序插件介绍 在Web开发中，数据展示经常需要通过表格的形式呈现给用户，并且为了方便用户查找所需信息，通常会提供排序功能。传统的表格排序往往需要后端的...