表格数据点击排序

news/2025/2/22 18:51:51/

点击表格表头,按照这一列的数据重新排列,点击一次降序,再点击升序,各列不会互相影响降序和升序的轮换。

<!DOCTYPE html>
<html><head><meta charset='utf-8'><title>html</title><style>table{width: 500px;height: 300px;text-align: center;}</style></head><body><table border="1" cellspacing="0"><thead><tr><th>姓名</th><th onclick="sortTable(1)">力量</th><th onclick="sortTable(2)">敏捷</th><th onclick="sortTable(3)">智力</th></tr></thead><tbody><tr><td>悟空</td><td>17</td><td>24</td><td>13</td></tr><tr><td>唐僧</td><td>15</td><td>22</td><td>16</td></tr><tr><td>玉帝</td><td>19</td><td>15</td><td>20</td></tr><tr><td>杨戬</td><td>23</td><td>15</td><td>14</td></tr><tr><td>如来</td><td>16</td><td>8</td><td>54</td></tr></tbody></table><script>var tbody = document.getElementsByTagName('tbody')[0]; //表格的内容var tr_collection = tbody.children;var isSort = [true,true,true];const sortTable = function(row){var td_Array = [];for(let i=0;i<tr_collection.length;i++){td_Array.push(tr_collection[i].children[row])  //把每一列的td元素添加到数组中}var td_Sort;if(row ===1){if(isSort[0]){td_Sort = td_Array.sort((a,b)=>(Number(a.innerText)-Number(b.innerText)));isSort[0] = !isSort[0];}else if(!isSort[0]){td_Sort = td_Array.sort((a,b)=>(Number(b.innerText)-Number(a.innerText)));isSort[0] = !isSort[0];}}if(row ===2){if(isSort[1]){td_Sort = td_Array.sort((a,b)=>(Number(a.innerText)-Number(b.innerText)));isSort[1] = !isSort[1];}else if(!isSort[1]){td_Sort = td_Array.sort((a,b)=>(Number(b.innerText)-Number(a.innerText)));isSort[1] = !isSort[1];}}if(row ===3){if(isSort[2]){td_Sort = td_Array.sort((a,b)=>(Number(a.innerText)-Number(b.innerText)));isSort[2] = !isSort[2];}else if(!isSort[2]){td_Sort = td_Array.sort((a,b)=>(Number(b.innerText)-Number(a.innerText)));isSort[2] = !isSort[2];}}for(let j =0;j<td_Sort.length;j++){tbody.appendChild(td_Sort[j].parentElement); //按照每一列的td排序之后,将td父元素//也就是tr元素按顺序插入到tbody中}}</script></body>
</html>

http://www.ppmy.cn/news/728356.html

相关文章

antd-vue中的表格排序

antd-vue中的表格排序 在使用antd-vue的表格想实现排序&#xff0c;但是不知道怎么弄的可以看这里&#xff0c;此处讲解了一个是数字类的排序&#xff08;例如成绩&#xff09;&#xff0c;一个是字符串类的排序(例如姓名)。 那么&#xff0c;我们开始吧。 字符串类型的排序 …

Excel表格怎么随机打乱顺序

今天跟大家分享一下Excel表格怎么随机打乱顺序 1.最近有朋友问我怎么将Excel表格数据随机打乱&#xff0c;下面就以下图为例跟大家分享一下。 2.选中数据单元格区域 3.点击下图选项&#xff08;Excel工具箱&#xff0c;百度即可了解详细下载安装信息&#xff0c;本文这里就不做…

Excel分享:excel表格排序方法

Excel制作表格是为了统计数据&#xff0c;那么统计了数据之后就避免不了筛选数据、排序数据等操作。今天我们分享如何应用excel排序功能。 升降序 简单的就是将数据进行升序降序的排列&#xff0c;我们只需要选中需要排序的数据&#xff0c;然后点击排序和筛选就可以选择升序…

layui表格(table)排序

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 https://blog.csdn.net/yufengaotian/article/details/80975256 layui表格本身提供sort排序&#xff0c;但是只能排序当前一页&#xff1b;如果后台返回几十页数据&#xff0c;需要排序显示&#xf…

html表格筛选排序规则,excel表格的排序规则与排序技术

在Excel中&#xff0c;我们可以使用“排序”功能方便地对数据进行排序。 通常&#xff0c;我们可以使用“开始”选项卡“编辑”组“排序和筛选”中的命令&#xff0c;如图1所示。 图1 也可以使用“数据”选项卡“排序和筛选”组中的排序命令&#xff0c;如图2所示。 图2 然而&a…

表格排序

<!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>表格排序</title><link rel"stylesheet" href"tablechange.css" type"text/css"/> </head> <body> <div class…

Excel电子表格排序的三种方法

排序是数据处理中的经常性工作&#xff0c;Excel排序有序数计算&#xff08;类似成绩统计中的名次&#xff09;和数据重排两类。本文以几个车间的产值和名称为例&#xff0c;介绍Excel 2000/XP的数据排序方法。 一、数值排序 1、RANK函数 RANK函数是Excel计算序数的主要工具&am…

计算机一级递增排列表格,excel表格数据按递增排序的方法

Excel中如何做到按递增顺序就行排序呢?接下来是学习啦小编为大家带来的excel表格数据按递增排序的方法&#xff0c;供大家参考。 excel表格数据按递增排序的方法 递增排序步骤1&#xff1a;打开excel工作簿&#xff0c;选择要进行排序的列&#xff0c;如下图所示 excel表格数据…