jquery畫一張表格那麼如何實現對這個表格進行排序呢，下面我們就來看一個例子。
方法/步驟
接下來就是畫表格了。
| 班級 | 姓名 | 學號 | 成績 |
|---|---|---|---|
| 1 | 孫悟空 | 01 | 98 |
| 1 | 豬八戒 | 02 | 89 |
| 1 | 沙和尚 | 03 | 77 |
| 1 | 唐僧 | 04 | 100 |
| 1 | 白龍馬 | 05 | 23 |
| 2 | 白晶晶 | 01 | 99 |
| 2 | 春三十娘 | 02 | 95 |
| 班級 | 姓名 | 學號 | 成績 |
|---|---|---|---|
| 1 | 孫悟空 | 01 | 98 |
| 1 | 豬八戒 | 02 | 89 |
| 1 | 沙和尚 | 03 | 77 |
| 1 | 唐僧 | 04 | 100 |
| 1 | 白龍馬 | 05 | 23 |
| 2 | 白晶晶 | 01 | 99 |
| 2 | 春三十娘 | 02 | 95 |
然後就是引入js程式碼。
(function($) {
//用來存放這一列的內容
var tdArray=[];
var index=0;
//將排序後的陣列重新載入到表格中
var resetTr=function($index,tableId){
for(var i=0;i
var trCont=tdArray[i];
$("#"+tableId+" tbody tr").each(function(){
var thisText=$(this).children("td:eq("+$index+")").text();
if(thisText==trCont){
$("#"+tableId+" tbody").append($(this));
}
})
}
}
//升序
var compare_up=function(a,b){
if((/[\u4e00-\u9fa5]+/).test(a) && (/[\u4e00-\u9fa5]+/).test(b)){
return a.charCodeAt(0)-b.charCodeAt(0);
}else{
return a-b;
}
}
//降序
var compare_down=function(a,b){
//這裡是判斷漢字的排序
if((/[\u4e00-\u9fa5]+/).test(a) && (/[\u4e00-\u9fa5]+/).test(b)){
return b.charCodeAt(0)-a.charCodeAt(0);
}else{
return b-a;
}
}
//陣列排序
var fSort=function(compare){
tdArray.sort(compare)
}
//點選表頭事件
var clickFun=function($index,tableId){
$("#"+tableId+" tbody tr").each(function(){
var tdText=$(this).children("td:eq("+$index+")").text();
tdArray.push(tdText);
})
}
$.fn.sortTable = function() {
var tableId=$(this)[0].id
$("#"+tableId+" th").toggle(function(){
index=$(this).index();
clickFun(index,tableId);
fSort(compare_up);
resetTr(index,tableId);
},function(){
index=$(this).index();
clickFun(index,tableId);
fSort(compare_down);
resetTr(index,tableId);
})
};
})(jQuery);
