我们在上网中都能看到很多能够排序的,如大小、时间、价格等
现在我们也试一下排序功能:
排序的函数代码:里面含有点击之后排序--还原,和排升序和降序。
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>
以上就是本文的全部内容,很详细,教大家如何对表格中的元素进行排序操作,感谢大家阅读这篇javascript实现对表格元素进行排序操作的文章,希望大家喜欢。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 杨阳《约定HQCDII》头版限量编号2024[WAV+CUE]
- 曝《黑神话:悟空》DLC明年推出 农历新年前后
- PS5日本涨价19% 索尼股价应声上涨2.7%
- 《黑神话》发行平台遭大规模网攻 外媒却鲜有报道
- 伍佰《爱你伍佰年 世纪典藏原音精选3CD》[WAV+CUE][2.3GB]
- 伍佰《爱情的尽头》[WAV+CUE][2.6GB]
- 伍佰 《光环摇滚之声DSD》[WAV+CUE][500MB]
- 王菲.1999-只爱陌生人【EMI百代】【WAV+CUE】
- 林美音.1993-酒后的心声【瑞华】【WAV+CUE】
- 群星.2024-凡人歌电视剧原声带【正午阳光】【FLAC分轨】
- 黑神话悟空上品骨悚然精魄获取方法一览|上品骨悚然精魄收集攻略
- 《演灭Evotinction》正式登陆多平台发售!带你进入科幻潜行新境界
- 命运圣契2024公测最新兑换码大全 命运圣契开服可用兑换码汇总
- 银霞.1979-《回答·兰花草》新加坡限量复黑版[WAV+CUE]
- 王菲.1996-《乐乐精逊SACD日本限量版[WAV+CUE]