HTML中的table里面的元素排序
来源:互联网 发布:sql 总金额 编辑:程序博客网 时间:2024/05/22 06:32
我们在上网中都能看到很多能够排序的,如大小,时间等
现在我们也试一下排序功能:
排序的函数代码:里面含有点击之后排序--还原,和排升序和降序
function sortAge(){//对年龄进行排序,要先进行获得每一行对象,然后对象对象中的第一个(从0 开始)的大小进行排序var tabNode = document.getElementById("tabid");var rows0 = tabNode.rows;var rows1 = [];//现将元素拷贝一份出来, 第一行不用排序for (var x = 1; x < rows0.length; x++) {rows1[x - 1] = rows0[x];}for (var x = 0; x < rows1.length - 1; x++) {//每个元素是行对象for (var y = x + 1; y < rows1.length; y++) {//对每一行的内容进行解析成数字if (parseInt(rows1[x].cells[1].innerHTML) > parseInt(rows1[y].cells[1].innerHTML)) {//alert("aa="+x+":"+rows1[x].cells[1].innerHTML);//alert("bb"+rows1[y].cells[1].innerHTML);var temp = rows1[x];rows1[x] = rows1[y];rows1[y] = temp;}}}/* 点击之后排序,排序之后恢复之前的状态if (flag){for (var x = 0; x < rows1.length; x++) {//tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容rows1[x].parentNode.appendChild(rows1[x]);}}else{for (var x = 1; x < rows0.length; x++) {//tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容rows0[x].parentNode.appendChild(rows0[x]);}}flag=!flag;*//* 下面的是点之后出现正序和逆序显示 正序和逆序的区别就是appendchild的前后关系而已*/var ageimg=document.getElementById("ageid");if (flag) {for (var x = 0; x < rows1.length; x++) {//排好序之后就从0开始//tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容rows1[x].parentNode.appendChild(rows1[x]);}ageimg.innerHTML="年龄▲";//设置上面的图标}else{for (var x = rows1.length-1; x >=0; x--) {//tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容rows1[x].parentNode.appendChild(rows1[x]);}ageimg.innerHTML="年龄▼"}flag=!flag;loading();//排序之后还要对颜色重新设置}设置表格的背景颜色代码《导入的css》:
function loading(){var name;var tabNode=document.getElementById("tabid");var rows=tabNode.rows;//获得每一行的数组对象var rowslength=rows.length;//每一行的长度for(var x=1;x<rowslength;x++){//根据每一个去设置if(x%2==0){rows[x].className="one";}else{rows[x].className="two";}//当移动上去之后,之前的颜色要记录下来,不然移下来之后全部都是一个颜色了rows[x].onmouseover=function(){name=this.className;this.className="three";}rows[x].onmouseout=function(){this.className=name;}}}onload=function(){loading();}css代码:
table td a:hover{ background-color:#0080c0; }.one{background-color:#80ff00;}.two{background-color:#ff8040;}.three{background-color:#008040;}table{width:500px;height:500px;border:#400040 solid 2px;border-collapse:collapse;}table td,th{border:solid 2px;}table th{background-color:#c0c0c0;}效果图 排序之前:
升序:
降序:
完整代码:
<!DOCTYPE html><html> <head> <title>sort.html</title> <style type="text/css"> table td a:hover{ background-color:#0080c0; }.one{background-color:#80ff00;}.two{background-color:#ff8040;}.three{background-color:#008040;}table{width:500px;height:500px;border:#400040 solid 2px;border-collapse:collapse;}table td,th{border:solid 2px;}table th{background-color:#c0c0c0;} </style> <script type="text/javascript"> function loading(){var name;var tabNode=document.getElementById("tabid");var rows=tabNode.rows;//获得每一行的数组对象var rowslength=rows.length;//每一行的长度for(var x=1;x<rowslength;x++){//根据每一个去设置if(x%2==0){rows[x].className="one";}else{rows[x].className="two";}//当移动上去之后,之前的颜色要记录下来,不然移下来之后全部都是一个颜色了rows[x].onmouseover=function(){name=this.className;this.className="three";}rows[x].onmouseout=function(){this.className=name;}}}onload=function(){loading();}var flag=true;function sortAge(){//对年龄进行排序,要先进行获得每一行对象,然后对象对象中的第一个(从0 开始)的大小进行排序var tabNode = document.getElementById("tabid");var rows0 = tabNode.rows;var rows1 = [];//现将元素拷贝一份出来, 第一行不用排序for (var x = 1; x < rows0.length; x++) {rows1[x - 1] = rows0[x];}for (var x = 0; x < rows1.length - 1; x++) {//每个元素是行对象for (var y = x + 1; y < rows1.length; y++) {//对每一行的内容进行解析成数字if (parseInt(rows1[x].cells[1].innerHTML) > parseInt(rows1[y].cells[1].innerHTML)) {//alert("aa="+x+":"+rows1[x].cells[1].innerHTML);//alert("bb"+rows1[y].cells[1].innerHTML);var temp = rows1[x];rows1[x] = rows1[y];rows1[y] = temp;}}}/* 点击之后排序,排序之后恢复之前的状态if (flag){for (var x = 0; x < rows1.length; x++) {//tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容rows1[x].parentNode.appendChild(rows1[x]);}}else{for (var x = 1; x < rows0.length; x++) {//tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容rows0[x].parentNode.appendChild(rows0[x]);}}flag=!flag;*//* 下面的是点之后出现正序和逆序显示 正序和逆序的区别就是appendchild的前后关系而已*/var ageimg=document.getElementById("ageid");if (flag) {for (var x = 0; x < rows1.length; x++) {//排好序之后就从0开始//tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容rows1[x].parentNode.appendChild(rows1[x]);}ageimg.innerHTML="年龄▲";//设置上面的图标}else{for (var x = rows1.length-1; x >=0; x--) {//tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容rows1[x].parentNode.appendChild(rows1[x]);}ageimg.innerHTML="年龄▼"}flag=!flag;loading();//排序之后还要对颜色重新设置} </script> </head> <body> <table id="tabid"> <tr><th>姓名</th><th><a href="javascript:void(0)" onclick="sortAge()" id="ageid">年龄</a></th><th>出生地</th></tr><tr><td>张三</td><td>13</td><td>湖南长沙</td></tr><tr><td>李四</td><td>15</td><td>湖南常德</td></tr><tr><td>jack</td><td>45</td><td>湖南临澧</td></tr><tr><td>王华</td><td>23</td><td>浙江杭州</td></tr><tr><td>张进</td><td>30</td><td>安微合肥</td></tr><tr><td>周全</td><td>23</td><td>湖南益阳</td></tr><tr><td>杨哥</td><td>42</td><td>湖南常德</td></tr> </table> </body></html>
1 0
- HTML中的table里面的元素排序
- 转:html 里面table的属性
- 正则表达式。取Html中Table中的Td里面的值
- js获取html中的table元素里的每一行的行号
- HTML table元素
- js中选择html-table中的元素值
- html table排序
- html table排序
- html5中的table元素
- ajax下插入html,里面的元素无法添加事件
- 在html里面处理菱形元素的各种情况
- 在html里面处理菱形元素的各种情况
- 关于html中的表格table的用法
- C++操作HTML TABLE元素
- HTML:HTML中的元素
- 一个已经排序的数组,去除里面重复的元素
- lua-把table中的元素按照key的ascii码升序排序并组装成key-value的xml格式
- Java-对list里面的元素进行冒泡排序
- sscanf() 的作用
- 软件测试—接口测试简介
- Ubuntu安装后无法连接无线网络
- Java并发编程:Thread类的使用
- Linux简单的文本处理
- HTML中的table里面的元素排序
- 使用VelocityTracker获取在屏幕滑动的速度
- 第七周 项目2-建立链队算法库
- struct和typedefstruct 的区别
- 启动服务两种方式,并与activity通信
- OCdemo - 05 NSDictionary 字典
- C语言第四课练习
- PostgreSQL Why checkpointer impact performance so much ? - 4
- 微信invalid signature签名错误可能原因