萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> Html5 >> js靜態html表格排序功能實現

js靜態html表格排序功能實現

歡迎大家在這裡學習html表格排序!下面是我們給大家整理出來的精彩內容。希望大家在這裡學習!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""> 

<html xmlns"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<title>無標題文檔</title> 

<style> 

*{font-family:Arial, Helvetica, sans-serif;font-size:14px;border:none;} 

body{text-align:center;} 

table{margin:100px auto;} 

td{width:100px;height:24px;text-align:center;line-height:24px;border:1px solid silver;} 

.red{color:red;} 

.top{background:#CCCCCC;cursor:pointer;} 

.up{background:#FFFFCC url(/upload/20090211095733175.gif) no-repeat right 5px;} 

.down{background:#FFFFCC url(/upload/20090211095734843.gif) no-repeat right 5px;} 

.hov{background:#F0EFE5;} 

</style> 

</head> 

<body> 

<table cellpadding="0" id="table"> 

<tr class="top"><td>kick me</td><td >kick me</td><td>kick me</td><td>kick me</td></tr> 

<tr> 

<td><span id="bfn_la_bac.usa">15.43</span></td> 

<td class="red">700</td> 

<td>1.220</td> 

<td class="red">阿</td> 

</tr> 

<tr><td><span id="bfn_la_c.usa">7.05</span></td> 

<td class="red">4</td> 

<td>3,000</td> 

<td class="red">炳</td> 

</tr> 

<tr><td><span id="bfn_la_jpm.usa">30.62</span></td> 

<td class="red">30</td> 

<td>2,558,800</td> 

<td class="red">和</td> 

</tr> 

<tr> 

<td><span id="bfn_la_axp.usa">22.30</span></td> 

<td class="red">5</td><td>6</td> 

<td class="red">瞎</td> 

</tr> 

<tr><td><span id="bfn_la_mrk.usa">26.31</span></td> 

<td class="red">0.6</td><td>5</td> 

<td class="red">-</td> 

</tr> 

<tr><td><span id="bfn_la_pg.usa">63.16</span></td> 

<td class="red">7</td><td>4</td> 

<td class="red">子</td> 

</tr> 

</table> 

<script type="text/javascript"> 

 

var tableSort = function(){ 

this.initialize.apply(this,arguments); 

 

tableSort.prototype = { 

 

initialize : function(tableId,clickRow,startRow,endRow,classUp,classDown,selectClass){ 

this.Table = document.getElementById(tableId); 

this.rows = this.Table.rows;//所有行 

this.Tags = this.rows[clickRow-1].cells;//標簽td 

this.up = classUp; 

this.down = classDown; 

this.startRow = startRow; 

this.selectClass = selectClass; 

this.endRow = (endRow == 999? this.rows.length : endRow); 

this.T2Arr = this._td2Array();//所有受影響的td的二維數組 

this.setShow(); 

}, 

//設置標簽切換 

setShow:function(){ 

var defaultClass = this.Tags[0].className; 

for(var Tag ,i=0;Tag = this.Tags[i];i++){ 

Tag.index = i; 

addEventListener(Tag ,'click', Bind(Tag,statu)); 

var _this =this; 

var turn = 0; 

function statu(){ 

for(var i=0;i<_this.Tags.length;i++){ 

_this.Tags[i].className = defaultClass; 

if(turn==0){ 

addClass(this,_this.down) 

_this.startArray(0,this.index); 

turn=1; 

}else{ 

addClass(this,_this.up) 

_this.startArray(1,this.index); 

turn=0; 

}, 

//設置選中列樣式 

colClassSet:function(num,cla){ 

//得到關聯到的td 

for(var i= (this.startRow-1);i<(this.endRow);i++){ 

for(var n=0;n<this.rows[i].cells.length;n++){ 

removeClass(this.rows[i].cells[n],cla); 

addClass(this.rows[i].cells[num],cla); 

}, 

//開始排序 num 根據第幾列排序 aord 逆序還是順序 

startArray:function(aord,num){ 

var afterSort = this.sortMethod(this.T2Arr,aord,num);//排序後的二維數組傳到排序方法中去 

this.array2Td(num,afterSort);//輸出 

}, 

//將受影響的行和列轉換成二維數組 

_td2Array:function(){ 

var arr=[]; 

for(var i=(this.startRow-1),l=0;i<(this.endRow);i++,l++){ 

arr[l]=[]; 

for(var n=0;n<this.rows[i].cells.length;n++){ 

arr[l].push(this.rows[i].cells[n].innerHTML); 

return arr; 

}, 

//根據排序後的二維數組來輸出相應的行和列的 innerHTML 

array2Td:function(num,arr){ 

this.colClassSet(num,this.selectClass); 

for(var i= (this.startRow-1),l=0;i<(this.endRow);i++,l++){ 

for(var n=0;n<this.Tags.length;n++){ 

this.rows[i].cells[n].innerHTML = arr[l][n]; 

}, 

//傳進來一個二維數組,根據二維數組的子項中的w項排序,再返回排序後的二維數組 

sortMethod:function(arr,aord,w){ 

//var effectCol = this.getColByNum(whichCol); 

arr.sort(function(a,b){ 

x = killHTML(a[w]); 

y = killHTML(b[w]); 

x = x.replace(/,/g,''); 

y = y.replace(/,/g,''); 

switch (isNaN(x)){ 

case false: 

return Number(x) - Number(y); 

break; 

case true: 

return x.localeCompare(y); 

break; 

}); 

arr = aord==0?arr:arr.reverse(); 

return arr; 

/*-----------------------------------*/ 

function addEventListener(o,type,fn){ 

if(o.attachEvent){o.attachEvent('on'+type,fn)} 

else if(o.addEventListener){o.addEventListener(type,fn,false)} 

else{o['on'+type] = fn;} 

 

function hasClass(element, className) { 

var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); 

return element.className.match(reg); 

 

function addClass(element, className) { 

if (!this.hasClass(element, className)) 

element.className += " "+className; 

 

function removeClass(element, className) { 

if (hasClass(element, className)) { 

var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); 

element.className = element.classNam

copyright © 萬盛學電腦網 all rights reserved