【JS】依据表格ID进行排序(附凝视)
分享一个前端做的依据表格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进行排序(附凝视)的更多相关文章
- 案例学习总结:原生JS实现表格排序
最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...
- JS对表格排序(支持对序号,数字,字母,日期)
JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSort ...
- Atitit 列表表格按照字段排序数据解决方案
Atitit 列表表格按照字段排序数据解决方案 1.1. 排序ui1 1.1.1. C:\Users\Administrator\Desktop\00oa\com.attilax\ui\orderAr ...
- (转)用JS实现表格中隔行显示不同颜色
用JS实现表格中隔行显示不同颜色 第一种: <style> tr{bgColor:expression( this.bgColor=((this.rowIndex)%2==0 )? ...
- react拖拽(表格拖拽排序、普通拖拽排序以及树形拖拽排序)
表格拖拽排序:组件地址:https://reactabular.js.org/#/drag-and-drop 拖动的排序是用React-DnD:React-DnD:http://react-dnd.g ...
- clipboard.min.js 复制表格内容
<script type="text/javascript" src="js/clipboard.min.js"></script> & ...
- js实现表格配对小游戏
js实现表格配对小游戏 一.总结 一句话总结: 二.js实现表格配对 1.配对游戏案例说明 实例描述: 当用户点击两个相同的图案或字符后配对成功,全部配对成功后游戏获胜 案例008采用了大家常见的小游 ...
- Django前端HTML通过JS实现表格可编辑,动态添加行,回车完成新建文件夹
功能描述: 点击“新建文件夹”按钮,在table的末尾增加一行:单击页面的新增行,使单元格td变成可编辑状态:输入内容后,当单元格失去焦点时,保存输入的内容:回车后通过AJAX提交后台完成新建文件夹. ...
- 在Java中使用Collections.sort 依据多个字段排序
一.如何使用Collections工具类进行排序 使用Collections工具类进行排序主要有两种方式: 1.对象实现Comparable接口,重写compareTo方法 /** * @author ...
随机推荐
- hadoop深入研究:(五)——Archives
转载请注明来源地址:http://blog.csdn.net/lastsweetop/article/details/9123155 简介 我们在hadoop深入研究:(一)——hdfs介绍里已讲过, ...
- [Machine Learning (Andrew NG courses)]IV.Linear Regression with Multiple Variables
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenFoXzE5OTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- ios添加pre和post build action
再vs中,我们可以很方便的再build前.后执行一些脚本为我们做点什么事情.再ios中怎么搞呢,哪必然是对xcode进行操作了.再google搜索了一把,有说操作Scheme的也有说再直接再targe ...
- Lucene.Net 2.3.1开发介绍 —— 二、分词(六)
原文:Lucene.Net 2.3.1开发介绍 -- 二.分词(六) Lucene.Net的上一个版本是2.1,而在2.3.1版本中才引入了Next(Token)方法重载,而ReusableStrin ...
- perl lwp 获取请求头
<pre name="code" class="html">[root@dr-mysql01 ~]# cat getx.pl use LWP::Us ...
- Linux多线程服务端编程:使用muduo C++网络库
内容推荐本 书主要讲述采用现代C++在x86-64 Linux上编写多线程TCP网络服务程序的主流常规技术,重点讲解一种适应性较强的多线程服务器的编程模型,即one loop per thread.这 ...
- java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
- Hibernate之1-N关联映射
一.Hibernate之1-N关联映射 1. 哪边是 1 , 哪边是多 ? 须要从业务的角度来说明.比如,Employee 和 Department 之间就是 n-1 的关联关系,Order ...
- Android在onInterceptTouchEvent与onTouchEvent
onInterceptTouchEvent: onInterceptTouchEvent是在ViewGroup里面定义的.Android中的layout布局类一般都是继承此类的.onIntercept ...
- Objective-c 算术函数和常量代表
不变 常量名 说明 M_PI 圆周率(=π) M_PI_2 圆周率的1/2(=π/2) M_PI_4 圆周率的1/4(=π/4) M_1_PI =1/π M_2_PI =2/π M_E =e M_LO ...