-
2022-04-27 10:37:21
需求:1.排序由小到大;2.没有排序或者为0的默认到最后面
使用vue或者js都可以完成
效果图:
第一步:
对数组进行简单的排序this.tableData.forEach(r=>{ if(r.rank==null) r.rank=0 })//将值为null的变为0 this.tableData.sort(function(a, b){ return a.rank - b.rank; });//进行排序 this.moveZero(this.tableData)
第二步:
将rank为0的放到数组最后面moveZero(arr){ let y = 0;//定义y用于控制循环结束 for (let i = 0; y < arr.length; y++) { if (arr[i].rank == 0) arr.push(arr.splice(i, 1)[0]);//循环到是0的位置就删除该元素0并且在arr末尾push进这个元素0,由于splice删除了该位置元素,所以i不用+1,下次循环仍然检查i位置的元素 else i++;//循环到不是0的位置就继续往后循环 } console.log(arr); return arr;//返回操作后的原数组 },
更多相关内容 -
javascript实现对表格元素进行排序操作
2020-10-23 07:36:50主要介绍了javascript实现对表格元素进行排序操作,分别可以实现点击之后排序和还原,和排升序和降序的功能,文章末尾附完整代码,感兴趣的小伙伴们可以参考一下 -
Python实现EXCEL表格的排序功能示例
2020-12-26 00:44:11EXCEL的数值排序功能还是挺强大的,升序、降序,尤其自定义排序,能够对多个字段进行排序工作。 那么,在Python大法中,有没有这样强大的排序功能呢?答案是有的,而且本人觉得Python的排序功能,一点不比EXCEL的差... -
zort:一个小 jQuery 插件,用于对表格进行排序过滤
2021-07-22 00:59:08佐特 一个小的 jQuery 插件,用于对表格进行排序/过滤 用法 $ ( "table" ) . zort ( ) ; 表格的第一行必须包含th元素。 这些元素将用作排序按钮。 -
Jquery 选中表格一列并对表格排序实现原理
2020-12-12 18:06:03为了更好的理解在前端对表格进行排序的原理,也为了进一步的学习Jquery,所以决定用Jquery来实现一个对表格进行排序的小功能。 该实现的主要思想是:获取鼠标点击的表头单元格的列号,遍历数据行,获取每个中的html... -
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2020-11-22 08:57:40我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话... -
易语言高级表格各列同步排序
2020-07-22 04:36:47易语言高级表格各列同步排序源码,高级表格各列同步排序,自动编号,填充随机数据,高级表格排序,设置排序方向,快速排序 -
javascript对表格进行排序.docx
2021-12-05 10:05:16javascript对表格进行排序.docx -
tablesorter.js表格排序使用方法(支持中文排序)
2020-12-02 12:50:26最近,因为项目需要,对表格排序做了一下摸索,整理如下: 1. 首先,可从官网下载tablesorter.js,但并不支持中文的排序,对其源码进行修改: 部分源码: function sortText(a, b) { return ((a < b> b) ? 1 : 0))... -
Vue.js实现可排序的表格组件功能示例
2020-12-30 00:19:38我们基于 Vue.js 实现一个可根据某列进行排序的表格组件。 一个表格包含表头和数据两部分内容。因此,我们定义两个数组,columns 表示表头信息,在 <thread> 中渲染,并可在此指定某一列是否需要排序;data 表示数据... -
word怎样对表格进行排序?.docx
2021-09-27 04:34:55word怎样对表格进行排序?.docx -
易语言实现高级表格根据某列文本、数值排序
2020-07-20 15:36:02易语言实现高级表格根据某列文本、数值排序源码,实现高级表格根据某列文本、数值排序,高级表格排序,二分查找 -
js实现表格字段排序
2020-10-26 06:27:15本篇文章只要是对js表格字段排序的实例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 -
js对表格进行排序
2018-09-26 21:20:25<!DOCTYPE html> <html> <head&...表格搜索</title> </head> <script type="text/javascript"> wi<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格搜索</title> </head> <script type="text/javascript"> window.onload = function () { var oTab = document.getElementById('tab2'); var oBtn = document.getElementById('btn1'); oBtn.onclick = function () { var arr = []; for (var i = 0; i < oTab.tBodies[0].rows.length; i++) { arr[i]=oTab.tBodies[0].rows[i]; } arr.sort(function (tr1, tr2) { var n1 = parseInt(tr1.cells[0].innerHTML); var n2 = parseInt(tr2.cells[0].innerHTML); return n1-n2; }); for (var i = 0; i < arr.length; i++) { oTab.tBodies[0].appendChild(arr[i]); } }; } </script> <body> <input id="btn1" type="button" value="排序" /> <table id="tab2" width="500" border="1"> <thead> <td>序号</td> <td>姓名</td> <td>学号</td> <td>年龄</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>丁冯超</td> <td>131412</td> <td>21</td> <td></td> </tr> <tr> <td>4</td> <td>钟辉</td> <td>131212</td> <td>20</td> <td></td> </tr> <tr> <td>5</td> <td>申振</td> <td>131415</td> <td>23</td> <td></td> </tr> <tr> <td>2</td> <td>丁元超</td> <td>131315</td> <td>21</td> <td></td> </tr> <tr> <td>3</td> <td>于加良</td> <td>111415</td> <td>20</td> <td></td> </tr> </tbody> </table> </body> </html>
程序源代码,li中的元素跟数组中的元素灵活应用
其中运用的原理代码用如下的js代码进行解释<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>搜索的原理</title> <style type="text/css"> #ul1{background: green;} #ul2{background: yellow;} </style> <script type="text/javascript"> window.onload = function () { var Oul1 = document.getElementById('ul1'); var Oul2 = document.getElementById('ul2'); var Obtn = document.getElementById('btn1'); Obtn.onclick = function () { var oli = Oul1.children[0]; //Oul1.removeChild(oli);所以这一句可以删除 //Oul2.appendChild(oli);//先把原来数组中的元素删除然后将它赋值给新的父级 Oul1.appendChild(oli); } } </script> </head> <body> <ul id="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <input id="btn1" type="button" value="移动" /> <ul id="ul2"> </ul> </body> </html>
-
js学习案例实现一个完整的表格排序
2019-08-10 02:12:12js学习案例,实现一个完整的表格排序 -
js 静态HTML表格排序功能实现
2020-10-30 02:26:03对于对于一些表格按价格 等进行排序,方便用户对当前页面的高低价格排序,用户体验性好 -
tablesorter实现HTML表格点击表头排序
2019-04-01 15:12:30tablesorter实现HTML表格点击表头排序,同样适用于JSP、PHP等主流Web开发 -
js表格列拖动排序代码
2021-06-24 11:57:43js表格列拖动排序代码是一款单击鼠标长按表格列自由拖动排序,互换列排序效果代码,点击表格头部支持升降大小排序效果代码。 -
Google-Sheet-Color-Sort:绑定到Google表格的脚本,可帮助按背景填充颜色对Google表格行进行排序
2021-02-14 06:31:46Google-Sheet-Color-Sort 与Google表格绑定的脚本,可...选择一个排序列 通过单击并突出显示该列中的任何单元格,选择包含希望对其进行排序的背景填充颜色的列。 选择排序方式 突出显示所选列中的单元格后,请使用G -
jQuery Table表格排序显示代码.zip
2019-07-05 00:30:35jQuery Table表格排序显示代码是一款支持分类排序,按数字大小排序,按英文排序等等。 -
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2020-10-16 20:56:09主要介绍了利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
jQuery仿Excel表格列表排序代码
2020-06-10 07:17:15jQuery仿Excel表格列表排序代码,支持输入框检索表格数据内容和筛选表格字段,可按数字大小、字母顺序进行升降序排列。 -
JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序
2019-04-17 17:11:03JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序 -
Excel 对表格的某一列数据进行名次排序
2022-04-06 21:04:45列表数据如下图,根据列表数据在另一列中进行名次排序 点击工具菜单栏上的公式按钮,点击菜单下的自动求和函数,然后点击下拉框中的其他函数 在插入函数界面,在选择类别中,选择统计;在选择函数中,下拉选项框,...- 列表数据如下图,根据列表数据在另一列中进行名次排序
- 点击工具菜单栏上的公式按钮,点击菜单下的自动求和函数,然后点击下拉框中的其他函数
- 在插入函数界面,在选择类别中,选择统计;在选择函数中,下拉选项框,选择RANK函数
-
在RANK函数界面中,数值这个选项,点中自己要排序的数列,就完成设置,在引用这个选项,就是要比较的数字范围,这个时候就要输入,数字的范围,具体为B$6:B$16,这个是要输入的,尤其是$,这里不能直接选择下拉的。
-
之后就可以通过点击第一个排名单元格,然后下拉单元格,完成排名信息的生成
- 列表数据如下图,根据列表数据在另一列中进行名次排序
-
jquery-table-sorter:用于按每列对表格元素进行排序的小插件
2021-06-22 12:44:03jquery-table-sorter 一个小插件,用于按每列对表格元素进行排序。 -
jQuery增加和删除表格项目及实现表格项目排序的方法
2020-10-22 05:37:04jQuery对表格的操作是老生常谈的问题了,各种插件也到处都是,这里我们还是来从技术着手jQuery增加和删除表格项目及实现表格项目排序的方法: -
jQuery表格排序_两个简单的实例
2021-05-12 12:17:18内容索引:脚本资源,jQuery,jQuery排序,表格排序 jQuery 简单的表格排序功能,演示代码,一共有两个实例,都比较简单,引入了jquery-1.1.3.pack.js,同时还使用了一个专有的表格排序插件:jquery.tablesorter.js,... -
jquery.table.sort.js-jquery表格排序插件
2021-05-11 22:53:05摘要:脚本资源,jQuery,表格排序插件, jquery表格插件 jquery.table.sort.js-jquery表格排序插件,不管是双击表头的哪一个标题,数据都会按照点击的表头进行排序,以一个活动列表来演示如何为表格排序,这里请注意,...
收藏数
162,353
精华内容
64,941