javascript實現(xiàn)對表格元素進(jìn)行排序操作
更新時間：2015年11月18日 14:50:12 作者：YX_blog
這篇文章主要介紹了javascript實現(xiàn)對表格元素進(jìn)行排序操作，分別可以實現(xiàn)點擊之后排序和還原，和排升序和降序的功能，文章末尾附完整代碼，感興趣的小伙伴們可以參考一下
我們在上網(wǎng)中都能看到很多能夠排序的，如大小、時間、價格等
現(xiàn)在我們也試一下排序功能：
排序的函數(shù)代碼：里面含有點擊之后排序--還原，和排升序和降序。
function sortAge(){
//對年齡進(jìn)行排序，要先進(jìn)行獲得每一行對象，然后對象對象中的第一個（從0 開始）的大小進(jìn)行排序
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)容進(jìn)行解析成數(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<rowslength;x++){//根據(jù)每一個去設(shè)置
if(x%2==0){
rows[x].className="one";
}else{
rows[x].className="two";
}
//當(dāng)移動上去之后，之前的顏色要記錄下來，不然移下來之后全部都是一個顏色了
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;//獲得每一行的數(shù)組對象
var rowslength=rows.length;//每一行的長度
for(var x=1;x<rowslength;x++){//根據(jù)每一個去設(shè)置
if(x%2==0){
rows[x].className="one";
}else{
rows[x].className="two";
}
//當(dāng)移動上去之后，之前的顏色要記錄下來，不然移下來之后全部都是一個顏色了
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(){
//對年齡進(jìn)行排序，要先進(jìn)行獲得每一行對象，然后對象對象中的第一個（從0 開始）的大小進(jìn)行排序
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)容進(jìn)行解析成數(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è)置
}
</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>張進(jìn)</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>
以上就是本文的全部內(nèi)容，很詳細(xì)，教大家如何對表格中的元素進(jìn)行排序操作，感謝大家閱讀這篇javascript實現(xiàn)對表格元素進(jìn)行排序操作的文章，希望大家喜歡。
相關(guān)文章
ZeroClipboard插件實現(xiàn)多瀏覽器復(fù)制功能(支持firefox、chrome、ie6)
Zero Clipboard 利用透明的Flash讓其漂浮在復(fù)制按鈕之上，這樣其實點擊的不是按鈕而是Flash ，這樣將需要的內(nèi)容傳入Flash，再通過Flash的復(fù)制功能把傳入的內(nèi)容復(fù)制到剪貼板2014-08-08
JavaScript識別網(wǎng)頁關(guān)鍵字并進(jìn)行描紅的方法
這篇文章主要介紹了JavaScript識別網(wǎng)頁關(guān)鍵字并進(jìn)行描紅的方法,通過字符串的遍歷、匹配及動態(tài)添加等操作實現(xiàn)識別與描紅的功能,非常簡單實用,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了Js之如何移除Array/數(shù)組中指定元素問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
微信小程序五子棋游戲AI實現(xiàn)方法【附demo源碼下載】
這篇文章主要介紹了微信小程序五子棋游戲AI實現(xiàn)方法,結(jié)合實例形式分析了五子棋游戲中人機(jī)對戰(zhàn)的AI原理及相關(guān)實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2019-02-02
uniapp實現(xiàn)地圖點聚合功能的詳細(xì)教程
最近公司項目需求需要對設(shè)備在地圖上面進(jìn)行監(jiān)控,并在當(dāng)設(shè)備一定距離時進(jìn)行聚合,這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)地圖點聚合功能的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章介紹了intro.js 頁面引導(dǎo)簡單用法，有需要的朋友可以參考一下2013-08-08
按位非運算符，簡單的理解就是改變運算數(shù)的符號并減去1，當(dāng)然，這是只是簡單的理解能轉(zhuǎn)換成number類型的數(shù)據(jù)2011-07-07
使用typescript類型實現(xiàn)ThreeSum
這篇文章主要介紹了使用typescript類型實現(xiàn)ThreeSum，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以一下，希望對你學(xué)習(xí)又是幫助2022-08-08
JavaScript 監(jiān)聽組合按鍵思路及代碼實現(xiàn)
這篇文章主要介紹了JavaScript 監(jiān)聽組合按鍵思路及代碼實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
初步嘗試使用Express搭建了一個Web框架，那么接下來就是要在該框架下寫上自己的頁面，快速創(chuàng)建頁面這里選擇了bootstrap前端框架，通過它即使你不太懂前端設(shè)計，寫出來的頁面也不會太難看，感興趣的小伙伴們可以參考一下2016-03-03