本文详细介绍javascript操作表格排序

最新推荐文章于 2022-03-31 16:26:43 发布
最新推荐文章于 2022-03-31 16:26:43 发布
阅读量467 收藏
点赞数
分类专栏： 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>

kinmin2012
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在 Vue.js 中实现表格排序功能
weixin_44976692的博客
06-08 4万+
requestNum和，我们需要在columns数组中定义这些字段，并启用排序功能。data() {return {data: [],columns: [title: '请求数',},title: '响应时间',},],通过本文，我们了解了如何在 Vue.js 项目中实现一个具有排序功能的表格。我们使用 Ant Design Vue 组件库来构建表格，并通过定义和sortData方法来处理排序逻辑。希望这些示例和步骤能帮助你在自己的项目中实现类似的功能。
javascript操作表格排序实例分析
10-24
JavaScript操作表格排序是一个常见的Web开发任务，通常用于对表格数据按照特定规则进行排序，以便于更好地展示给用户。本文档提供了JavaScript实现表格排序的实例分析，涉及了数组排序与表格操作的相关技巧。 首先...
JavaScript学习笔记9--表格排序
溺水的鱼 - Later equals never.
08-19 892
这次的例子，只是把Nicholas C .Zakas的例子理解了一下，代码是在学习表格排序时的Demo.单个数据类型的排序比较简单，他这个例子的特别之处在于能兼容多种数据类型的排序。例子很简单，但是里面有些设计思想给我启发很大，每次看他的书，都有新的收获。html>  head>    title>SortTable2title>    meta http-equiv="content-t
xml排序
denny的专栏
01-18 5399
1 xsl:sort所使用的名字空间：xmlns:xsl=http://www.w3.org/1999/XSL/TransformSyntaxselect="expression"lang="language-code"data-type="text|number|qname"     //数据类型，可支持按数字排序order="ascending|desc
JavaScript学习笔记(1)——一个表格排序的例子
麻里酱的程序猿之路
12-29 398
在Web程序中，当用户要求为取得的数据表单作排序后再输出时，我们的一个解决方案可以是向数据库发送请求要求其返回经过排序后的数据，但这样做无疑占用了较多的资源。于是我们利用JavaScript语句中Array类的sort方法来在客户端对数据进行排序。 设有如下一个表格： 序号 姓名
使用 JavaScript 进行HTML表格排序
allway2的博客
03-31 1137
当 HTML 表有很多数据时，使信息列可排序会很有用。 以下技术使用 JavaScript 通过单击列标题对表行进行排序。 这是一个所有列都可排序的示例表。第二次单击同一列标题文本会反转排序。 Author Title Rating Review Date John Irving The cider house rules 6 January 31, 11 Kate Atkinson When will there be good news? 7
php表格单元格怎么实现排序,javascript实现对表格元素进行排序操作
weixin_36019543的博客
03-16 227
我们在上网中都能看到很多能够排序的，如大小、时间、价格等现在我们也试一下排序功能：排序的函数代码：里面含有点击之后排序--还原，和排升序和降序。function sortAge(){//对年龄进行排序，要先进行获得每一行对象，然后对象对象中的第一个(从0 开始)的大小进行排序var tabNode = document.getElementById("tabid");var rows0 = tab...
html表格按照编号排序,JS实现简单表格排序操作示例
weixin_34180452的博客
06-09 369
本文实例讲述了JS实现简单表格排序操作。分享给大家供大家参考，具体如下：sort table*{margin:0px;padding:0px;}body{background:#ccc;}table{width:350px;margin:0 auto;background-color:#eee;}table th{cursor:hand;padding:5px 0;background-color...
js php排序表格,javascript实现对表格元素进行排序操作_javascript技巧
weixin_32058931的博客
03-10 129
我们在上网中都能看到很多能够排序的，如大小、时间、价格等现在我们也试一下排序功能：排序的函数代码：里面含有点击之后排序--还原，和排升序和降序。function sortAge(){//对年龄进行排序，要先进行获得每一行对象，然后对象对象中的第一个(从0 开始)的大小进行排序var tabNode = document.getElementById("tabid");var rows0 = tab...
JavaScript实现表格排序方法
10-27
本文旨在介绍如何使用JavaScript实现表格排序的方法。 ### 知识点1：JavaScript排序算法的选择 实现表格排序的关键在于使用合适的排序算法。在JavaScript中，原生数组对象提供了一个排序方法`sort()`，可以通过...
javascript 表格内容排序 简单操作示例代码
10-26
在JavaScript中，对数组进行排序是一种常见的操作。数组排序可以基于数组中元素的某个属性来进行。在本文中，我们主要关注如何根据表格内容进行排序。表格内容通常由对象数组表示，每个对象代表一行数据，并包含多个...
javascript实现表格排序 编辑 拖拽 缩放
10-24
本文将详细介绍如何使用JavaScript实现这些特性。 首先，实现表格排序。JavaScript中的表格排序通常通过监听表格头的点击事件来实现。当用户点击某一列头时，可以获取到该列的数据，并根据数据类型（数字、字符串等...
超市管理系统，基于javaweb.zip
08-15
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无积分，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于收集和整理资料耗费时间的酬劳
vue3面试题2023,84页，几十道vue面试题，准备vue的面试，这么一份文件就够了
08-15
vue3面试题2023： Vue 的优缺点  优点 1.创建单页面应用的轻量级Web应用框架 2.简单易用 3.双向数据绑定 4.组件化的思想 5.虚拟DOM 6.数据驱动视图 缺点 不支持IE8
【雷达跟踪】基于matlab雷达目标生成与跟踪【含Matlab源码 7220期】.zip
08-15
CSDN海神之光上传的代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博客文章底部QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪（CEEMDAN）、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信
CTR2024中国广告主营销趋势调查报告.pdf
最新发布
08-15
【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2
毕业答辩PPT模板，共24页
08-15
毕业答辩PPT模板，共24页
实现JS点击表格列头排序功能
这个实现方式简单且实用，适用于大多数基于文本的表格排序场景。但请注意，如果表格数据包含复杂类型（如日期、数字等），可能需要对排序比较函数进行调整，以确保正确的比较逻辑。 通过JavaScript实现前端表格的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值