通過javascript的localeCompare來進行排序判斷判斷,這里舉例是對1列的table進行排序.
查看效果:javascript實現table多列排序,列是不通的數據類型,通過轉換后的數據類型再次排列
建立方法管理容器
var forasp = new Object;
首先看類型轉換函數
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();
}
}
再看比較函數
forasp.bijiao = function(TRi,oDatetype)//在這里解釋一下,TRi是第幾列如果是第一列則為0,第二列則為1,返回的結果也是一個函數,因為在排序函數中sort()里面是一個函數.
{
return function compare(oTR1,oTR2)
{
var s1 = forasp.conver(oTR1.cells[TRi].firstChild.nodeValue,oDatetype);//通過TRi傳過來列索引號的內容
var s2 = forasp.conver(oTR2.cells[TRi].firstChild.nodeValue,oDatetype);//并通過轉換函數將列的值進行轉換
if (s1<s2)//轉為相同的數據類型后比較.
{return -1;}
else if(s1>s2)
{return 1;}
else
{return 0;}
}
}
調用比較函數
forasp.sortTable = function(id,TRi,oDatetype)
{
var oTable = document.getElementById(id);//獲取以id為id的table對象---
var oTbody = oTable.tBodies[0];//獲取第一個tBody
var oRows = oTbody.rows;//獲取tBody的所有的行
var aTRs = new Array;//新建一個數組
for (var i=0;i < oRows.length ;i++ )
{
aTRs[i] = oRows[i];//循環將所有行換到新的數組
}
//在這里多一個功能就是翻轉,當多次點擊,都進行翻轉即可,在這里給表的對象設置一個屬性nowlie
if(oTable.nowlie!=TRi)//如果不是當前列
{
aTRs.sort(forasp.bijiao(TRi,oDatetype));//對數組進行比較,是通過新的數組的行比較===
}
else
{
aTRs.revers();
}
var otemp = document.createDocumentFragment();//創建文檔碎片
for (var i = 0;i<aTRs.length ;i++ )
{
otemp.appendChild(aTRs[i]);//分別將每行加入到文檔碎片中
}
oTbody.appendChild(otemp);//將文檔碎片添加到文檔中
oTable.nowlie = TRi;//設置nowlie屬性
}
-->
接下來是頁面代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>javascript獲取按鍵值-網站制作學習網</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');">數字排序</th>
<th onclick = "forasp.sortTable('forasp_cn',2,'float');">小樹排序</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>
完畢,看看你懂了么,這是通過javascript的localepare對table內容進行排序,
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
