我们在上网中都能看到很多能够排序的，如大小、时间、价格等

现在我们也试一下排序功能：

排序的函数代码：里面含有点击之后排序--还原，和排升序和降序。

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

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;

}

效果图-----排序之前：

升序：

降序：

完整代码：

sort.html姓名

出生地

张三

13

湖南长沙

李四

15

湖南常德

jack

45

湖南临澧

王华

23

浙江杭州

张进

30

安微合肥

周全

23

湖南益阳

杨哥

42

湖南常德

以上就是本文的全部内容，很详细，教大家如何对表格中的元素进行排序操作，感谢大家阅读这篇javascript实现对表格元素进行排序操作的文章，希望大家喜欢。