JS实现表格排序，<thead>的不同字段

最新推荐文章于 2024-05-30 14:37:27 发布
最新推荐文章于 2024-05-30 14:37:27 发布
阅读量1.2k 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34825758/article/details/78139720
版权
这篇博客介绍了如何使用JavaScript实现HTML表格的排序功能。通过监听表格头部点击事件，动态调整排序标志并调用自定义`sort`函数进行排序。`sort`函数根据`data-type`属性区分数字、字符串和日期三种类型的字段，进行相应类型的比较和排序。示例代码中展示了针对数字、字符串和日期的排序逻辑，以及如何将排序后的数据重新添加回表格。
摘要由CSDN通过智能技术生成 
<table id="tableSort">
    <thead>
        <tr>
            <th data-type="num">工号</th>
            <th data-type="string">姓名</th>
            <th data-type="string">性别</th>
            <th data-type="date">时间</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>06</td>
            <td>sssss</td>
            <td>男</td>
            <td>2008-10-10
最低0.47元/天 解锁文章
龙坑逼团55开
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现表格排序
Java技术与你分享
11-30 1万+
今天有点闲，写个小东西，使用JS实现点击表格标题栏实现自动排序功能，嘻嘻... 一、JS代码，文件名为code.js如下： (function($){ //插件 $.extend($,{ //命名空间 sortTable:{ sort:function(tableId,Idx){ var table = document.getElementById(tableId)
《JavaScript高级程序设计》阅读笔记（十九）：表格排序
weixin_34137799的博客
07-30 143
排序代码 function SortTable(sTableID, iCol, sDataType){ this.oTable=document.getElementById(sTableID); this.oTBody=this.oTable.tBodies[0]; this.colDataRows=this.oTBody.rows; this.aT...
使用js插件来使Table列表排序
最新发布
qq_23392319的博客
05-30 170
使用js插件来使Table列表排序
JavaScript Table排序
weixin_33757609的博客
10-06 158
序二（09/05/03） 近来还是那么忙，趁五一更新一下程序吧。这个版本主要增加和改进了以下东西：1，对字符串改用localeCompare来比较；2，一次排序中能使用多个排序对象（用于值相等时再排序）；3，修正一些发现的问题；4，改进程序结构，个人觉得是更灵活更方便了；5，增加bool类型比较；6，添加attribute/property的内容；7，修正ie6/7的radio/checkbo...
js表格排序
wanghuailong的专栏
12-25 1124
SortTable2var k=0;/**//**************************************************************************排序的主方法，有三个形参，STableTd,iCol,sDataType分别为需要排序的表格ID，需要排序的表格列号，所在列的数据类型（支持int,float,date,string四种数据类型)*****
JS表格排序
Nty268的博客
04-15 1155
//查找表格的<th>元素，让它们可单击 function makeSortable(table) { //var headers = document.getElementsByTagName("th"); //全页面table排序 var headers = table.getElementsByTagName("th"); //选定table排序 // console.log(headers); for (var i = 1; i < headers.l
js实现表格字段排序
10-26
<title>表格排序示例</title> <script src="sortTable.js"></script> </head> <body> <table id="myTable"> <thead> <tr> <th onclick="sortTable('myTable', 0, 'int')">数字</th> <th onclick="sortTable('...
javascript操作表格排序实例分析
10-24
本文档提供了JavaScript实现表格排序的实例分析，涉及了数组排序与表格操作的相关技巧。 首先，文档中提到了一个关键的转换器函数convert，它的主要功能是将表格中列的字段类型转换为JavaScript能进行排序的类型。...
js实现点击table表头字段带箭头标示
08-26
标签“JS”、“前端”和“表格排序”都强调了这个话题的核心技术领域。在实际项目中，还可以结合其他前端库和框架，如jQuery、Angular、Vue或React，来简化实现，提供更丰富的功能，例如动画效果、多列排序、异步...
javascript-表格排序(降序/反序)实现介绍(附图)
10-27
JavaScript是一种广泛应用于网页开发的脚本语言，它允许开发者...实现表格排序功能不仅可以提升用户体验，还可以让数据的展示更加直观和有序。掌握上述知识点，可以帮助我们更好地完成Web开发中的数据展示和处理任务。
妙用Angularjs实现表格按指定列排序
10-19
在AngularJS中，实现表格按指定列排序是一个常见的需求，特别是在数据展示和用户交互的应用场景。AngularJS提供了内置的`orderBy`过滤器，使得这个功能的实现变得非常简单。下面我们将详细探讨如何利用AngularJS的`...
js实现表格排序
07-03
用js实现对表格的排序，小demo一个，希望对新手们有点帮助
js对表格进行排序
03-28
利用纯js对表格进行排序,动态扩展性能好.并且可按照字符串,日期,图片,数字排序.
js 表格排序(编辑+拖拽+缩放)
12-08
Table body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ overflow:hidden} #tab td{border: 1px solid #CECFCE;he
JavaScript实现表格的排序
Just The Way You Are
08-06 1737
利用JS实现表格排序，依赖于JS数组中Array对象的sort方法 首先介绍一下sort()方法： 1.定义和用法： sort()方法用于对数组元素的排序 2.语法： arrayObject.sort(sortRule); 3.参数： sortRule ：可选。规定排序顺序。必须是函数。 4.返回值： 对数组的引用。数组在原数组上进行排序，不生成副本。 5.说明： 如果调用该
JS中对表格排序
helanye的专栏
07-21 1260
本文所实现的表格排序大致可以分为以下几个步骤：    1、取得要排序的所有行，将其引用push到一个数组中    2、根据要排序的行的情况编写数组排序时使用的比较函数    3、对包含所有行引用的数组进行排序    4、将排序后的数组按照指定的顺序把数组所引用的行重新写回DOM   如果您对使用DOM操作表格还不太熟悉，您可以参考一下《使用DOM编写浏览器兼容的Table操作》,如果您对数组的
JS实现table列排序
每天积累一点点
09-12 850
[code="html"] JS实现table列排序 //调用比较函数 function sortTable(id,rowNum){ var oTable = document.getElementById(id);//获取以id为id的table对象 var oTbody = oTable.tBodies[0];//获取第一个tBody var oRows =...
html表格点击表头字段排序
03-27
要在HTML表格中实现点击表头字段排序，可以使用JavaScript编写一个函数来执行排序操作。以下是一个简单的示例： HTML代码： ```html <table id="myTable"> <thead> <tr> <th onclick="sortTable(0)">Name</th> <th onclick="sortTable(1)">Age</th> <th onclick="sortTable(2)">Country</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>21</td> <td>USA</td> </tr> <tr> <td>Mike</td> <td>32</td> <td>Canada</td> </tr> <tr> <td>Sarah</td> <td>25</td> <td>Australia</td> </tr> </tbody> </table> ``` JavaScript代码： ```javascript function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("myTable"); switching = true; dir = "asc"; while (switching) { switching = false; rows = table.getElementsByTagName("tr"); for (i = 1; i < (rows.length - 1); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName("td")[n]; y = rows[i + 1].getElementsByTagName("td")[n]; if (dir == "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { shouldSwitch = true; break; } } else if (dir == "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { shouldSwitch = true; break; } } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount ++; } else { if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } ``` 在这个示例中，我们使用一个带有三个表头字段的表格。每个表头字段都添加了一个`onclick`属性，该属性指定了一个JavaScript函数`sortTable()`，该函数将被调用以执行排序操作。 `sortTable()`函数接受一个参数`n`，该参数表示要按照哪个表头字段进行排序。该函数使用`getElementsByTagName()`方法获取表格中的所有行，并使用嵌套的循环遍历这些行。在每次循环中，函数比较两个行的单元格，如果它们需要交换，则使用`insertBefore()`方法交换它们的位置。函数还使用一个变量`dir`来跟踪排序顺序（升序或降序），并在每次循环中修改该变量以确保正确的排序顺序。 在这个示例中，我们将函数绑定到了表头的`onclick`事件上。这意味着当用户点击表头字段时，函数将被调用以执行排序操作。您可以根据需要修改此代码以满足您的特定需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值