javascript實現對表格元素進行排序操作
編輯：關於JavaScript
我們在上網中都能看到很多能夠排序的，如大小、時間、價格等
現在我們也試一下排序功能：
排序的函數代碼：裡面含有點擊之後排序--還原，和排升序和降序。
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<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代碼：
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;//獲得每一行的數組對象
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 < 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();//排序之後還要對顏色重新設置
}
</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>張進</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>
以上就是本文的全部內容，很詳細，教大家如何對表格中的元素進行排序操作，感謝大家閱讀這篇javascript實現對表格元素進行排序操作的文章，希望大家喜歡。
小編推薦
熱門推薦