欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jQuery實(shí)現(xiàn)表格的排序

 更新時(shí)間:2016年12月02日 11:14:19   作者:船長(zhǎng)op  
本篇文章介紹了jQuery實(shí)現(xiàn)表格的排序方法與主要思路,相信會(huì)對(duì)大家有所幫助,下面就跟小編一起來(lái)看看吧
$(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ì)腳本之家的支持!

相關(guān)文章

  • jQuery實(shí)現(xiàn)返回頂部效果的方法

    jQuery實(shí)現(xiàn)返回頂部效果的方法

    這篇文章主要介紹了jQuery實(shí)現(xiàn)返回頂部效果的方法,涉及jQuery頁(yè)面樣式、鼠標(biāo)事件及頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下
    2015-05-05
  • jquery實(shí)現(xiàn)聚光燈效果的方法

    jquery實(shí)現(xiàn)聚光燈效果的方法

    這篇文章主要介紹了jquery實(shí)現(xiàn)聚光燈效果的方法,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)圖片時(shí)顯示當(dāng)前圖片高亮,其他圖片變暗的聚光燈效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-02-02
  • jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)

    jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)

    jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)...
    2007-06-06
  • jQuery子窗體取得父窗體元素的方法

    jQuery子窗體取得父窗體元素的方法

    這篇文章主要介紹了jQuery子窗體取得父窗體元素的方法,涉及jQuery窗體元素操作的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-05-05
  • 綁定回車(chē)enter事件代碼

    綁定回車(chē)enter事件代碼

    這篇文章主要介紹了綁定回車(chē)enter事件代碼,需要的朋友可以參考下
    2014-05-05
  • jQuery+ajax實(shí)現(xiàn)滾動(dòng)到頁(yè)面底部自動(dòng)加載圖文列表效果(類(lèi)似圖片懶加載)

    jQuery+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-06
  • jQuery實(shí)現(xiàn)圖片跟隨效果

    jQuery實(shí)現(xiàn)圖片跟隨效果

    這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)圖片跟隨效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • jQuery中animate的幾種用法與注意事項(xiàng)

    jQuery中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
  • jQuery獲取樣式中顏色值的方法

    jQuery獲取樣式中顏色值的方法

    這篇文章主要介紹了jQuery獲取樣式中顏色值的方法,可實(shí)現(xiàn)針對(duì)IE與Chrome、Firefox等不同瀏覽器都可獲取css樣式中background-color值的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-01-01
  • 詳細(xì)解讀Jquery各Ajax函數(shù)($.get(),$.post(),$.ajax(),$.getJSON())

    詳細(xì)解讀Jquery各Ajax函數(shù)($.get(),$.post(),$.ajax(),$.getJSON())

    這篇文章主要介紹了詳細(xì)解讀Jquery各Ajax函數(shù)($.get(),$.post(),$.ajax(),$.getJSON())的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-08-08

最新評(píng)論