通過(guò)javascript的localeCompare來(lái)進(jìn)行排序判斷判斷,這里舉例是對(duì)1列的table進(jìn)行排序.
查看效果:javascript實(shí)現(xiàn)table多列排序,列是不通的數(shù)據(jù)類(lèi)型,通過(guò)轉(zhuǎn)換后的數(shù)據(jù)類(lèi)型再次排列
建立方法管理容器
var forasp = new Object;
首先看類(lèi)型轉(zhuǎn)換函數(shù)
forasp.conver =function(oValue,oDatetype)
{switch(oDatetype){
case "int":
return parseInt(oValue);
case "float":
return parseFloat(oValue);
case "date":
return new Date(Date.parse(oValue));
default:
return oValue.toString();
}
}
再看比較函數(shù)
forasp.bijiao = function(TRi,oDatetype)//在這里解釋一下,TRi是第幾列如果是第一列則為0,第二列則為1,返回的結(jié)果也是一個(gè)函數(shù),因?yàn)樵谂判蚝瘮?shù)中sort()里面是一個(gè)函數(shù).
{
return function compare(oTR1,oTR2)
{
var s1 = forasp.conver(oTR1.cells[TRi].firstChild.nodeValue,oDatetype);//通過(guò)TRi傳過(guò)來(lái)列索引號(hào)的內(nèi)容
var s2 = forasp.conver(oTR2.cells[TRi].firstChild.nodeValue,oDatetype);//并通過(guò)轉(zhuǎn)換函數(shù)將列的值進(jìn)行轉(zhuǎn)換
if (s1<s2)//轉(zhuǎn)為相同的數(shù)據(jù)類(lèi)型后比較.
{return -1;}
else if(s1>s2)
{return 1;}
else
{return 0;}
}
}
調(diào)用比較函數(shù)
forasp.sortTable = function(id,TRi,oDatetype)
{
var oTable = document.getElementById(id);//獲取以id為id的table對(duì)象---
var oTbody = oTable.tBodies[0];//獲取第一個(gè)tBody
var oRows = oTbody.rows;//獲取tBody的所有的行
var aTRs = new Array;//新建一個(gè)數(shù)組
for (var i=0;i < oRows.length ;i++ )
{
aTRs[i] = oRows[i];//循環(huán)將所有行換到新的數(shù)組
}
//在這里多一個(gè)功能就是翻轉(zhuǎn),當(dāng)多次點(diǎn)擊,都進(jìn)行翻轉(zhuǎn)即可,在這里給表的對(duì)象設(shè)置一個(gè)屬性nowlie
if(oTable.nowlie!=TRi)//如果不是當(dāng)前列
{
aTRs.sort(forasp.bijiao(TRi,oDatetype));//對(duì)數(shù)組進(jìn)行比較,是通過(guò)新的數(shù)組的行比較===
}
else
{
aTRs.revers();
}
var otemp = document.createDocumentFragment();//創(chuàng)建文檔碎片
for (var i = 0;i<aTRs.length ;i++ )
{
otemp.appendChild(aTRs[i]);//分別將每行加入到文檔碎片中
}
oTbody.appendChild(otemp);//將文檔碎片添加到文檔中
oTable.nowlie = TRi;//設(shè)置nowlie屬性
}
-->
接下來(lái)是頁(yè)面代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>javascript獲取按鍵值-網(wǎng)站制作學(xué)習(xí)網(wǎng)</TITLE>
在這里插入代碼
</HEAD>
<BODY>
<table id="forasp_cn" >
<thead>
<tr>
<th onclick = "forasp.sortTable('forasp_cn',0);">字符排序</th>
<th onclick = "forasp.sortTable('forasp_cn',1,'int');">數(shù)字排序</th>
<th onclick = "forasp.sortTable('forasp_cn',2,'float');">小樹(shù)排序</th>
<th onclick = "forasp.sortTable('forasp_cn',3,'date');">日期排序</th>
</tr>
</thead>
<tbody>
<tr><td>w</td><td>1</td><td>1.01</td><td>6/9/1999</td></tr>
<tr><td>w</td><td>3</td><td>3.25</td><td>12/25/2010</td></tr>
<tr><td>w</td><td>2</td><td>2.18</td><td>10/9/2008</td></tr>
<tr><td>f</td><td>36</td><td>2.99</td><td>9/12/1985</td></tr>
<tr><td>a</td><td>65</td><td>3.12</td><td>3/9/2010</td></tr>
<tr><td>s</td><td>22</td><td>10.3</td><td>4/2/2009</td></tr>
<tr><td>p</td><td>12</td><td>4.5</td><td>9/17/2011</td></tr>
<tr><td>dian</td><td>31</td><td>2.33</td><td>3/3/2007</td></tr>
<tr><td>c</td><td>33</td><td>9.68</td><td>6/4/2010</td></tr>
<tr><td>n</td><td>21</td><td>5.69</td><td>9/17/2009</td></tr>
</tbody>
</BODY>
</HTML>
完畢,看看你懂了么,這是通過(guò)javascript的localepare對(duì)table內(nèi)容進(jìn)行排序,
更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：