对table根据某个属性值进行排序

问题:给定一个table如下,点击按钮根据年龄对表进行排序;

 1 <table border="" cellspacing="" cellpadding="">
 2     <tr><th>姓名</th><th>年龄</th></tr>
 3     <tr><td>a</td><td>2</td></tr>
 4     <tr><td>b</td><td>4</td></tr>
 5     <tr><td>c</td><td>5</td></tr>
 6     <tr><td>d</td><td>1</td></tr>
 7     <tr><td>e</td><td>3</td></tr>
 8 </table>
 9 <input type="button" value = "sort"/>

思路:

1.将dom中的tr放到数组中;

2.利用数组的sort方法排序;

3.排序完毕后用重绘页面;

代码如下:

 1 var btn = document.getElementsByTagName("input")[0];
 2 var trs = document.getElementsByTagName("tr");
 3 var arr = [];
 4 for(var i = 1;i<trs.length;i++){
 5     arr.push(trs[i]);
 6 }
 7 btn.onclick = function(){
 8     arr.sort(function(x,y){
 9         return x.getElementsByTagName("td")[1].innerHTML-y.getElementsByTagName("td")[1].innerHTML
10     }).forEach(function(i){
11         document.getElementsByTagName("table")[0].appendChild(i);
12     })
13
14 }
时间: 2024-10-13 22:20:14

对table根据某个属性值进行排序的相关文章

js sort方法根据数组中对象的某一个属性值进行排序

sort方法接收一个函数作为参数,这里嵌套一层函数用来接收对象属性名,其他部分代码与正常使用sort方法相同. var arr = [ {name:'zopp',age:0}, {name:'gpp',age:18}, {name:'yjj',age:8} ]; function compare(property){ return function(a,b){ var value1 = a[property]; var value2 = b[property]; return value1 -

ArcGIS10.1 属性值排序,图斑排序

ArcGIS10.1技术交流(第4期) 属性值排序,图斑排序 第一讲 介绍了arcgis10.1中的排序这一个工具,介绍了如何利用这一个工具对属性值进行排序,以及对图斑块进行一个空间排序,以及途中还介绍了一下目前网上一种比较普通方法来进行图斑排序的一个原理,再次粗略的引了一下皮亚诺曲线 点击学习 第二讲 为上一讲讲到的ArcGIs自带的排序工具的下承接(),介绍从提取图斑外接矩形的左上点坐标,导出至Excel,对得到的坐标值进行两个排序,得到一个排序值,但是重点呢,不是结果,而是告诉大家这种方法

第二篇 HTML 常用元素及属性值

常用元素及属性值 先和同学了解下,一部分常用的元素,区别以及属性,常用在哪里. 标签是由左右尖括号抱起来的,由开始标签开始,再由结束标签结束,里面内容则是元素,比如:<div></div> <p></p>  还有一些特殊的,称为"空元素",它没有结束标签,它的结束标签就是在开始标签后面结束,比如:<img src="图片地址" alt="提示" /> 那么我们就先来了解,元素,它分为两种

【java】java反射机制,动态获取对象的属性和对应的参数值,并属性按照字典序排序,Field.setAccessible()方法的说明【可用于微信支付 签名生成】

方法1:通过get()方法获取属性值 package com.sxd.test.controller; public class FirstCa{ private Integer num; private String name; private Boolean flag; public Integer getNum() { return num; } public void setNum(Integer num) { this.num = num; } public String getNam

【CSS3】table的css属性

table的css属性 border-collapse 设置是否把表格边框合并为单一的边框. border-spacing 设置分隔单元格边框的距离. caption-side 设置表格标题的位置. empty-cells 设置是否显示表格中的空单元格. table-layout 设置显示单元.行和列的算法. 1.border-collapse:设置是否把表格边框合并位单一边框 table, td, th { border-collapse:separate;/*默认值,边框会被分开*/ bor

设置表的属性值自动增加

设置表的属性值自动增加,比如插入第一条记录时 id 为 1,插入第二条记录时 id 为 2,以此类推,没增加一条记录,字段值自动加 1 mysql> CREATE TABLE tb_emp8    -> (    -> id INT(11) PRIMARY KEY AUTO_INCREMENT,   # 指定员工的编号自动递增    -> name VARCHAR(25) NOT NULL,    -> deptId INT(11),    -> salary FLOA

java代码解析json对象获取json对象属性值

说明:解析JSON需要用到 org.json.jar 架包,下载地址:http://download.csdn.net/detail/wtingting5211314/7641749 代码如下: package com.ultrapower.syn.webservice.test; import org.json.JSONArray;import org.json.JSONObject; public class TestJson { /**  * @param args  */ public

PHP 使用用户自定义的比较函数对数组中的值进行排序

原文:PHP 使用用户自定义的比较函数对数组中的值进行排序 usort (PHP 4, PHP 5) usort —      使用用户自定义的比较函数对数组中的值进行排序 说明 bool usort        ( array &$array       , callable $cmp_function       ) 本函数将用用户自定义的比较函数对一个数组中的值进行排序.如果要排序的数组需要用一种不寻常的标准进行排序,那么应该使用此函数. Note: 如果两个成员比较结果相同,则它们在排

Python通过lxml库遍历xml通过xpath查询(标签,属性名称,属性值,标签对属性)

xml实例: 版本一: <?xml version="1.0" encoding="UTF-8"?><country name="chain"><provinces><heilongjiang name="citys"><haerbin/><daqing/></heilongjiang><guangdong name="city