我們在上網(wǎng)中都能看到很多能夠排序的，如大小、時間、價格等

現(xiàn)在我們也試一下排序功能：

排序的函數(shù)代碼：里面含有點擊之后排序--還原，和排升序和降序。

function sortAge(){

//對年齡進行排序，要先進行獲得每一行對象，然后對象對象中的第一個(從0 開始)的大小進行排序

var tabNode = document.getElementById("tabid");

var rows0 = tabNode.rows;

var rows1 = [];

//現(xiàn)將元素拷貝一份出來， 第一行不用排序

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++) {

//對每一行的內(nèi)容進行解析成數(shù)字

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;

}

}

}

/* 點擊之后排序，排序之后恢復(fù)之前的狀態(tài)

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;*/

/* 下面的是點之后出現(xiàn)正序和逆序顯示 正序和逆序的區(qū)別就是appendchild的前后關(guān)系而已*/

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="年齡▲";//設(shè)置上面的圖標(biāo)

}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();//排序之后還要對顏色重新設(shè)置

}

設(shè)置表格的背景顏色代碼，導(dǎo)入的css：

function loading(){

var name;

var tabNode=document.getElementById("tabid");

var rows=tabNode.rows;//獲得每一行的數(shù)組對象

var rowslength=rows.length;//每一行的長度

for(var x=1;x

if(x%2==0){

rows[x].className="one";

}else{

rows[x].className="two";

}

//當(dāng)移動上去之后，之前的顏色要記錄下來，不然移下來之后全部都是一個顏色了

rows[x].οnmοuseοver=function(){

name=this.className;

this.className="three";

}

rows[x].οnmοuseοut=function(){

this.className=name;

}

}

}

οnlοad=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;

}

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

升序：

降序：

完整代碼：

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;//獲得每一行的數(shù)組對象

var rowslength=rows.length;//每一行的長度

for(var x=1;x

if(x%2==0){

rows[x].className="one";

}else{

rows[x].className="two";

}

//當(dāng)移動上去之后，之前的顏色要記錄下來，不然移下來之后全部都是一個顏色了

rows[x].οnmοuseοver=function(){

name=this.className;

this.className="three";

}

rows[x].οnmοuseοut=function(){

this.className=name;

}

}

}

οnlοad=function(){

loading();

}

var flag=true;

function sortAge(){

//對年齡進行排序，要先進行獲得每一行對象，然后對象對象中的第一個(從0 開始)的大小進行排序

var tabNode = document.getElementById("tabid");

var rows0 = tabNode.rows;

var rows1 = [];

//現(xiàn)將元素拷貝一份出來， 第一行不用排序

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++) {

//對每一行的內(nèi)容進行解析成數(shù)字

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;

}

}

}

/* 點擊之后排序，排序之后恢復(fù)之前的狀態(tài)

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;*/

/* 下面的是點之后出現(xiàn)正序和逆序顯示 正序和逆序的區(qū)別就是appendchild的前后關(guān)系而已*/

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="年齡▲";//設(shè)置上面的圖標(biāo)

}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();//排序之后還要對顏色重新設(shè)置

}

姓名年齡出生地

張三	13	湖南長沙
李四	15	湖南常德
jack	45	湖南臨澧
王華	23	浙江杭州
張進	30	安微合肥
周全	23	湖南益陽
楊哥	42	湖南常德

以上就是本文的全部內(nèi)容，很詳細，教大家如何對表格中的元素進行排序操作，感謝大家閱讀這篇javascript實現(xiàn)對表格元素進行排序操作的文章，希望大家喜歡。

總結(jié)

以上是生活随笔為你收集整理的php表格单元格怎么实现排序,javascript实现对表格元素进行排序操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。