基于jQuery實(shí)現(xiàn)表格的排序
$(function(){ //存入點(diǎn)擊列的每一個(gè)TD的內(nèi)容; var aTdCont = []; //點(diǎn)擊列的索引值 var thi = 0 //重新對(duì)TR進(jìn)行排序 var setTrIndex = function(tdIndex){ for(i=0;i<aTdCont.length;i++){ var trCont = aTdCont[i]; $("tbody tr").each(function() { var thisText = $(this).children("td:eq("+tdIndex+")").text(); if(thisText == trCont){ $("tbody").append($(this)); } }); } } //比較函數(shù)的參數(shù)函數(shù) var compare_down = function(a,b){ return a-b; } var compare_up = function(a,b){ return b-a; } //比較函數(shù) var fSort = function(compare){ aTdCont.sort(compare); } //取出TD的值,并存入數(shù)組,取出前二個(gè)TD值; var fSetTdCont = function(thIndex){ $("tbody tr").each(function() { var tdCont = $(this).children("td:eq("+thIndex+")").text(); aTdCont.push(tdCont); }); } //點(diǎn)擊時(shí)需要執(zhí)行的函數(shù) var clickFun = function(thindex){ aTdCont = []; //獲取點(diǎn)擊當(dāng)前列的索引值 var nThCount = thindex; //調(diào)用sortTh函數(shù) 取出要比較的數(shù)據(jù) fSetTdCont(nThCount); } //點(diǎn)擊事件綁定函數(shù) $("th").toggle(function(){ thi= $(this).index(); clickFun(thi); //調(diào)用比較函數(shù),降序 fSort(compare_up); //重新排序行 setTrIndex(thi); },function(){ clickFun(thi); //調(diào)用比較函數(shù) 升序 fSort(compare_down); //重新排序行 setTrIndex(thi); }) })
主要思路:
因?yàn)镴S有SORT的方法,對(duì)數(shù)組進(jìn)行排序,那么通過(guò)個(gè)方法,我們就會(huì)想到數(shù)組了。
1.點(diǎn)標(biāo)表格標(biāo)頭的時(shí)候,取出點(diǎn)擊的是那一列。即列的索引值。因?yàn)橄旅嬉M(jìn)行排序的就是該列。所以我要知道是點(diǎn)的那一列。
2.對(duì)表格的數(shù)據(jù)部分,也就是tbody部分,進(jìn)行點(diǎn)擊的列的取值,把這些值存入到一個(gè)數(shù)組當(dāng)中。
3.將存入數(shù)據(jù)的數(shù)組,通過(guò)SORT方法進(jìn)行排序。(這里寫(xiě)了兩種,升,或降,因?yàn)槭屈c(diǎn)擊時(shí)要切換排序的方式。第一次降,第二次升,第三降,第四升,依次進(jìn)行)
4.將排序好的數(shù)組的值進(jìn)行遍歷,在遍歷過(guò)程中,和每一行TR的點(diǎn)擊列的那個(gè)TD當(dāng)中的數(shù)據(jù)進(jìn)行一個(gè)比較。如果相等,就插入到tbody的最后去.(最先插入的,將是在第一行。)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家有所幫助,謝謝對(duì)腳本之家的支持!
- jQuery表格排序組件-tablesorter使用示例
- 基于jquery的表格排序
- Jquery 選中表格一列并對(duì)表格排序?qū)崿F(xiàn)原理
- jquery tablesorter.js 支持中文表格排序改進(jìn)
- jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
- jquery 表格排序、實(shí)時(shí)搜索表格內(nèi)容(附圖)
- 擴(kuò)展jquery實(shí)現(xiàn)客戶(hù)端表格的分頁(yè)、排序功能代碼
- jquery實(shí)現(xiàn)表格本地排序的方法
- jquery.tableSort.js表格排序插件使用方法詳解
- jQuery增加和刪除表格項(xiàng)目及實(shí)現(xiàn)表格項(xiàng)目排序的方法
- jQuery html表格排序插件tablesorter使用方法詳解
- jQuery實(shí)現(xiàn)的表格前端排序功能示例
相關(guān)文章
jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)
jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)...2007-06-06jQuery+ajax實(shí)現(xiàn)滾動(dòng)到頁(yè)面底部自動(dòng)加載圖文列表效果(類(lèi)似圖片懶加載)
這篇文章主要介紹了jQuery+ajax實(shí)現(xiàn)滾動(dòng)到頁(yè)面底部自動(dòng)加載圖文列表效果,模擬圖片懶加載功能,涉及jQuery的ajax與asp.net交互動(dòng)態(tài)顯示頁(yè)面內(nèi)容的相關(guān)技巧,需要的朋友可以參考下2016-06-06jQuery中animate的幾種用法與注意事項(xiàng)
在今天之前,我對(duì)jQuery的中的animate()方法還停留在最常見(jiàn)的用法,查了一下手冊(cè),發(fā)現(xiàn)在1.8的時(shí)候增加了幾個(gè)比較有用的回調(diào)函數(shù),想著就來(lái)總結(jié)下jQuery中animate的幾種用法與注意事項(xiàng),方便自己或者大家有需要的時(shí)候參考借鑒,下面來(lái)一起看看吧。2016-12-12詳細(xì)解讀Jquery各Ajax函數(shù)($.get(),$.post(),$.ajax(),$.getJSON())
這篇文章主要介紹了詳細(xì)解讀Jquery各Ajax函數(shù)($.get(),$.post(),$.ajax(),$.getJSON())的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08