javascript實(shí)現(xiàn)對表格元素進(jìn)行排序操作
更新時(shí)間：2015年11月18日 14:50:12 作者：YX_blog
這篇文章主要介紹了javascript實(shí)現(xiàn)對表格元素進(jìn)行排序操作，分別可以實(shí)現(xiàn)點(diǎn)擊之后排序和還原，和排升序和降序的功能，文章末尾附完整代碼，感興趣的小伙伴們可以參考一下
我們在上網(wǎng)中都能看到很多能夠排序的，如大小、時(shí)間、價(jià)格等
現(xiàn)在我們也試一下排序功能：
排序的函數(shù)代碼：里面含有點(diǎn)擊之后排序--還原，和排升序和降序。
function sortAge(){
//對年齡進(jìn)行排序，要先進(jìn)行獲得每一行對象，然后對象對象中的第一個(gè)（從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++) {//每個(gè)元素是行對象
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;
}
}
}
/* 點(diǎn)擊之后排序，排序之后恢復(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;*/
/* 下面的是點(diǎn)之后出現(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ù)每一個(gè)去設(shè)置
if(x%2==0){
rows[x].className="one";
}else{
rows[x].className="two";
}
//當(dāng)移動(dòng)上去之后，之前的顏色要記錄下來，不然移下來之后全部都是一個(gè)顏色了
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ù)每一個(gè)去設(shè)置
if(x%2==0){
rows[x].className="one";
}else{
rows[x].className="two";
}
//當(dāng)移動(dòng)上去之后，之前的顏色要記錄下來，不然移下來之后全部都是一個(gè)顏色了
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)行獲得每一行對象，然后對象對象中的第一個(gè)（從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++) {//每個(gè)元素是行對象
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;
}
}
}
/* 點(diǎn)擊之后排序，排序之后恢復(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;*/
/* 下面的是點(diǎn)之后出現(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實(shí)現(xiàn)對表格元素進(jìn)行排序操作的文章，希望大家喜歡。
相關(guān)文章
js下拉框二級關(guān)聯(lián)菜單效果代碼具體實(shí)現(xiàn)
這篇文章介紹了js下拉框二級關(guān)聯(lián)菜單效果代碼具體實(shí)現(xiàn)，有需要的朋友可以參考一下2013-08-08
json文件想必大家對它并不陌生吧，它的靈活性還是不錯(cuò)的，下面為大家介紹下js如何讀寫json文件2014-10-10
Javascript從數(shù)組中隨機(jī)取出不同元素的兩種方法
這篇文章給大家分享了兩種Javascript從數(shù)組中隨機(jī)取出不同元素的方法，大家可以都學(xué)習(xí)學(xué)習(xí)，這樣更能有助于大家的學(xué)習(xí)和理解，下面來一起看看吧2016-09-09
JS處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)
下面小編就為大家?guī)硪黄狫S處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要給大家分享了一位C#程序員入門學(xué)習(xí)微信小程序的筆記，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了微信小程序HTTP接口請求封裝代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JavaScript+Java實(shí)現(xiàn)HTML頁面轉(zhuǎn)為PDF文件保存的方法
借助iText這個(gè)Java庫,我們可以將HTML文件保存為圖片文件進(jìn)而轉(zhuǎn)換成PDF格式,接下來就來具體看下JavaScript+Java實(shí)現(xiàn)HTML頁面轉(zhuǎn)為PDF文件保存的方法2016-05-05
這篇文章主要介紹了一文搞懂Map與Set的用法和區(qū)別,文章開頭給大家介紹了map和set的基本概念，了解這些基礎(chǔ)知識(shí)能夠幫助我們更好的使用，需要的朋友可以參考下2022-06-06
javascript實(shí)現(xiàn)簡單的頁面右下角提示信息框
本文給大家分享的是使用javascript實(shí)現(xiàn)簡單的頁面右下角提示信息框的方法和示例代碼，有需要的小伙伴可以參考下。2015-07-07
往輸入域中插入字符串(光標(biāo)所在位置)，在本文將為大家介紹下使用js是如何實(shí)現(xiàn)的，感興趣的朋友可以參考下2013-09-09