分享一个前端做的依据表格ID进行排序的方法哈,贴码例如以下:

HTML:

  1. <input type="button" id="btn1" value="排序"/>
  2.  
  3. <table id="tab1" border="1" width="500">
  4. <thead>
  5. <td>ID</td>
  6. <td>姓名</td>
  7. <td>年龄</td>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td>3</td>
  12. <td>hello</td>
  13. <td>22</td>
  14. </tr>
  15. <tr>
  16. <td>1</td>
  17. <td>man</td>
  18. <td>35</td>
  19. </tr>
  20. <tr>
  21. <td>4</td>
  22. <td>girl</td>
  23. <td>24</td>
  24. </tr>
  25. <tr>
  26. <td>5</td>
  27. <td>woman</td>
  28. <td>37</td>
  29. </tr>
  30. <tr>
  31. <td>2</td>
  32. <td>guy</td>
  33. <td>19</td>
  34. </tr>
  35. </tbody>
  36. </table>

JS:

  1. window.onload=function(){
  2. var oTab=document.getElementById('tab1'); //获取表格
  3. var oBtn=document.getElementById('btn1'); //获取排序button。方便以下的点击操作
  4.  
  5. oBtn.onclick=function(){
  6. var arr=[]; //定义一个空的数组
  7. for(var i=0;i<oTab.tBodies[0].rows.length;i++){
  8. arr[i]=oTab.tBodies[0].rows[i]; //把表格的全部行数都存到arr数组里
  9. }
  10. arr.sort(function(tr1,tr2){ //这里传入两个參数用于比較
  11. var n1=parseInt(tr1.cells[0].innerHTML); //这里取出表格里的行的第一个单元格,相应ID所在的单元格
  12. var n2=parseInt(tr2.cells[0].innerHTML);
  13. return n1-n2; //若想倒序,能够改动为return n2-n1
  14. });
  15. for(var i=0;i<arr.length;i++){
  16. oTab.tBodies[0].appendChild(arr[i]); //把上面sort排好序的元素一行行地按顺序又一次插入到表格中
  17. }
  18. };
  19. };

排序前:

排序后:

Author:致知

Sign:路漫漫其修远兮。吾将上下而求索。

【JS】依据表格ID进行排序(附凝视)的更多相关文章

  1. 案例学习总结:原生JS实现表格排序

    最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...

  2. JS对表格排序(支持对序号,数字,字母,日期)

    JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSort ...

  3. Atitit 列表表格按照字段排序数据解决方案

    Atitit 列表表格按照字段排序数据解决方案 1.1. 排序ui1 1.1.1. C:\Users\Administrator\Desktop\00oa\com.attilax\ui\orderAr ...

  4. (转)用JS实现表格中隔行显示不同颜色

    用JS实现表格中隔行显示不同颜色 第一种: <style> tr{bgColor:expression(     this.bgColor=((this.rowIndex)%2==0 )? ...

  5. react拖拽(表格拖拽排序、普通拖拽排序以及树形拖拽排序)

    表格拖拽排序:组件地址:https://reactabular.js.org/#/drag-and-drop 拖动的排序是用React-DnD:React-DnD:http://react-dnd.g ...

  6. clipboard.min.js 复制表格内容

    <script type="text/javascript" src="js/clipboard.min.js"></script> & ...

  7. js实现表格配对小游戏

    js实现表格配对小游戏 一.总结 一句话总结: 二.js实现表格配对 1.配对游戏案例说明 实例描述: 当用户点击两个相同的图案或字符后配对成功,全部配对成功后游戏获胜 案例008采用了大家常见的小游 ...

  8. Django前端HTML通过JS实现表格可编辑,动态添加行,回车完成新建文件夹

    功能描述: 点击“新建文件夹”按钮,在table的末尾增加一行:单击页面的新增行,使单元格td变成可编辑状态:输入内容后,当单元格失去焦点时,保存输入的内容:回车后通过AJAX提交后台完成新建文件夹. ...

  9. 在Java中使用Collections.sort 依据多个字段排序

    一.如何使用Collections工具类进行排序 使用Collections工具类进行排序主要有两种方式: 1.对象实现Comparable接口,重写compareTo方法 /** * @author ...

随机推荐

  1. Python 链接MysqlDB

    下载安装MySQLdb <1>linux版本 http://sourceforge.net/projects/mysql-python/ 下载,在安装是要先安装setuptools,然后在 ...

  2. TensorFlow实现与优化深度神经网络

    TensorFlow实现与优化深度神经网络 转载请注明作者:梦里风林Github工程地址:https://github.com/ahangchen/GDLnotes欢迎star,有问题可以到Issue ...

  3. 使用 boost 进行 CRC32 校验

    使用 boost 进行 CRC32 校验 - firebird321的专栏 - 博客频道 - CSDN.NET 使用 boost 进行 CRC32 校验 分类: 文件操作 2008-06-06 18: ...

  4. ABP分层设计

    ABP分层设计 一.为什么要分层 分层架构是所有架构的鼻祖,分层的作用就是隔离,不过,我们有时候有个误解,就是把层和程序集对应起来,就比如简单三层架构中,在你的解决方案中,一般会有三个程序集项目:XX ...

  5. jar包生制作几种方法,jar包导出三种方法:eclipse导出、jar命令、FatJar插件

    Eclipse将引用了第三方jar包的Java项目打包成jar文件的两种方法 方案一:用Eclipse自带的Export功能 步骤1:准备主清单文件 “MANIFEST.MF”, 由于是打包引用了第三 ...

  6. NSHashTable 和 NSMapTable学习

    今天,在实现play gif时间功能,我看见两个陌生班,只需看看这个纪录: NSSet和NSDictionary是两个经常使用的类,可是他们默认假定了当中对象的内存行为.对于NSSet.object是 ...

  7. Android:通知栏的使用

    非常久没有使用Android的通知功能了,今天把两年前的代码搬出来一看.发现非常多方法都废弃了,代码中各种删除线看的十分不爽.于是乎,打开Google,查看官方文档.学习最新的发送通知栏消息的方法. ...

  8. MariaDb数据库管理系统学习(二)使用HeidiSQL数据库图形化界面管理工具

    HeidiSQL 是一款用于简单化的 MySQL server和数据库管理的图形化界面.该软件同意你浏览你的数据库,管理表,浏览和编辑记录,管理用户权限等等.此外,你能够从文本文件导入数据,执行 SQ ...

  9. [Android学习笔记]PopupWindow的使用

    什么时候使用PopupWindow? 当业务需求的交互形式需要在当前页弹出一个简单可选项UI与用户进行交互时,可使用PopupWindow完成此功能开发 Android Dev API Doc Pop ...

  10. Threejs 的场景查看 - 几个交互事件库助你方便查看场景

    Threejs 的场景查看 - 几个交互事件库助你方便查看场景 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&q ...