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

HTML:

<input type="button" id="btn1" value="排序"/>

    <table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>3</td>
<td>hello</td>
<td>22</td>
</tr>
<tr>
<td>1</td>
<td>man</td>
<td>35</td>
</tr>
<tr>
<td>4</td>
<td>girl</td>
<td>24</td>
</tr>
<tr>
<td>5</td>
<td>woman</td>
<td>37</td>
</tr>
<tr>
<td>2</td>
<td>guy</td>
<td>19</td>
</tr>
</tbody>
</table>

JS:

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

排序前:

排序后:

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. 使用JDBC调用数据库的存储过程

    本篇讲述如何使用JDBC来调用MySQL数据库中的存储过程.建议在学习如何使用JDBC调用存储过程前,请先了解如何在数据库中使用存储过程. 存储过程是指在数据库系统中,一组为了完成特定功能的SQL语句 ...

  2. delphi 利用HTTP的POST方法做个在线翻译的小工具 good

    最近做了一个英汉小翻译的东东,用的是VC,ADO + Access访问数据库,单词数据库是从金山打字通2002弄来的.后来想了想,想再加个在线翻译的功能,记得经常使用GOOGLE翻译网站的在线翻译,也 ...

  3. 也谈C#之Json,从Json字符串到类代码

    原文:也谈C#之Json,从Json字符串到类代码  阅读目录 json转类对象 逆思考 从json字符串自动生成C#类  json转类对象 自从.net 4.0开始,微软提供了一整套的针对json进 ...

  4. WindowsPhone8中实现圆形图片的生成显示

    原文 WindowsPhone8中实现圆形图片的生成显示 很多软件中(比如QQ)用到了许多圆形图片,作为用户头像等等,原始图片往往是方形的,那么怎么样将方形的图片显示成圆形呢? 一种方法是当背景为固定 ...

  5. Boost下载安装编译配置使用指南(含Windows和Linux

    理论上,本文适用于boost的各个版本,尤其是最新版本1.45.0:适用于各种C++编译器,如VC6.0(部分库不支持),VS2003,VS2005,VS2008,gcc,C++ Builder等.先 ...

  6. .htaccess和license文件编写

    1 .htaccess 1.1 文件的位置 默认情况下放置于根目录 1.2 .htaccess文件的编写 1.2.1 错误页面跳转 ErrorDocument + 错误码 + 跳转路径/提示文字 eg ...

  7. 打开asp出现An error occurred on the server when processing the URL

    分享到:   2013-01-21 15:38   提问者采纳   方法一 以管理员身份运行CMD,将目录定位到%windir%\system32\inetsrv\,然后执行appcmd set co ...

  8. 微软 自带 AJAX 拓展

    <内容有点乱,自己找记忆的~~~> 微软自带AJAX 控件大全:控件简介: ScriptManager 控件 为启用了 AJAX 的 ASP.NET 网页管理客户端脚本. ScriptMa ...

  9. ASP.Net状态管理读书笔记--思维导图

    课前提问几个问题 使用Session 配置 model aspnet_regsql.exe 常见问答 问:为什么Session在有些机器上偶尔会丢失?答:可能和机器的环境有关系,比如:防火墙或者杀毒软 ...

  10. LIS小结(O(∩_∩)O~哄哄)

    ~\(≧▽≦)/~啦啦啦,昨天说的是LCS,今天我们要学习的是LIS,什么是LIS呢?  LIS: 最长有序子序列(递增/递减/非递增/非递减)这么说还是有些模糊,举个例子: 在一个无序的序列a1,a ...