javascript表格排序,javascript排序,javascript表格
web前端-js教程
我们在上网中都能看到很多能够排序的，如大小、时间、价格等现在我们也试一下排序功能：
排序的函数代码：里面含有点击之后排序–还原，和排升序和降序。
qq头像分享网站源码,ubuntu自带的vim,怎样破解防爬虫,php包含哪两种复合数据类型,唐河seo优化lzw
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 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 =0; x--) { // tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容 rows1[x].parentNode.appendChild(rows1[x]); } ageimg.innerHTML="年龄▼" } flag=!flag; loading();//排序之后还要对颜色重新设置 } 设置表格的背景颜色代码，导入的css：网盘登录界面源码,ubuntu打印网络状态,ios图片爬虫app,php dmc,优化技术seolzw
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代码：家居装修建材源码,ubuntu 未找到命令,鸡蛋外面的爬虫,php limt,黄江镇Seo优化lzw
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; } 效果图—–排序之前：
升序：
降序：
完整代码：
sort.html 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; } 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 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 =0; x--) { // tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容 rows1[x].parentNode.appendChild(rows1[x]); } ageimg.innerHTML="年龄▼" } flag=!flag; loading();//排序之后还要对颜色重新设置 }
| 姓名 | 年龄 | 出生地 |
|---|---|---|
| 张三 | 13 | 湖南长沙 |
| 李四 | 15 | 湖南常德 |
| jack | 45 | 湖南临澧 |
| 王华 | 23 | 浙江杭州 |
| 张进 | 30 | 安微合肥 |
| 周全 | 23 | 湖南益阳 |
| 杨哥 | 42 | 湖南常德 |
使用Javascript实现选择下拉菜单互移并排序【jquery】 | 使用Javascript实现选择下拉菜单互移并排序【jquery】 ...