如何使jQuery腳本適用於多個html表格

Question

我對jQuery相當陌生，但設法開發了一個腳本，用於在特定的斷點處操縱th和td標籤的高度。它基本上查找給定表格的每一行中的最高th或td，並將​​該高度應用於該特定行中的所有th和td標籤，然後移動到下一行等。

該腳本是必需的，因爲一個錯誤的Wordpress插件，它錯誤地改變了特定斷點處表的外觀。該插件是我們開發的核心，無法更改，所以我們必須使用jQuery來操縱表格的外觀。

一切工作正常，但現在我需要它爲任何給定頁面上顯示的多個表工作。

每個表都有類「tablepress」，我已經試過周圍，我們的腳本與

$('table.tablepress').each(function() { 

...our script... 

}) 

，但不工作和邏輯是打破我的心:)

這裏是我們的腳本：

jQuery(document).ready(function($){ 

    $(window).resize(function(){ 

    //get breakpoint as defined in table classes (desktop,tablet,phone) 

    var responsivemode = $("#tablepress-999-no-2").attr('class').split(/ |-/); 
    var breakpoint = 0; 
    if($.inArray('desktop',responsivemode) > -1){ 
     var breakpoint = 1200; 
    }else if($.inArray('tablet',responsivemode) > -1){ 
     var breakpoint = 980; 
    }else if($.inArray('phone',responsivemode) > -1){ 
     var breakpoint = 768; 
    }else{ 
     var breakpoint = 0; 
    } 

    //only manipulate table if breakpoint reached 

    if (parseInt($(window).width()) < breakpoint) { 

    var myobject = {}; 

    //1.each tr has the same number of ths/tds; each th/td has the same class to identify its position in the row - <th class="column-1"><th class="column-2">...<td class="column-1"><td class="column-2"> 
    //2.loop through each thead row, getting th class and height 
    //3.check if class already stored in myobject; if yes, check if current th height in loop is greater than value in myobject and overwrite it; if class not yet stored in myobject, add it 
    //4.loop 

    $("#tablepress-999-no-2 thead tr").each(function(){ 
     $(this).find('th').each(function(){ 
      var currentthclass = $(this).attr('class').split(' ')[0]; 
      var currentthheight = $(this).height(); 
      if(myobject.hasOwnProperty(currentthclass)){ 
       if($(this).height() > myobject[currentthclass]){ 
        myobject[currentthclass] = currentthheight; 
       } 
      }else{ 
       myobject[currentthclass] = currentthheight; 
      } 
     });//end th loop 
    });//end tr loop  

    //1.loop through each tbody row, getting td class and height 
    //2.check if class already stored in myobject; if yes, check if current td height in loop is greater than value in myobject and overwrite it; if class not yet stored in myobject, add it 
    //3.loop  

    $("#tablepress-999-no-2 tbody tr").each(function(){ 
     $(this).find('td').each(function(){ 
      var currenttdclass = $(this).attr('class').split(' ')[0]; 
      var currenttdheight = $(this).height(); 
      if(myobject.hasOwnProperty(currenttdclass)){ 
       if($(this).height() > myobject[currenttdclass]){ 
        myobject[currenttdclass] = currenttdheight; 
       } 
      }else{ 
       myobject[currenttdclass] = currenttdheight; 
      } 
     });//end td loop 
    });//end tr loop 

    //1.loop through myobject getting class name and height 
    //2.apply new heights to all th and td tags in table 

    $.each(myobject, function(keyobj,valueobj){ 
     $('#tablepress-999-no-2 tbody tr td.'+keyobj).each(function(){ 
      $(this).height(valueobj); 
     }); 
     $('#tablepress-999-no-2 thead th.'+keyobj).each(function(){ 
      $(this).height(valueobj); 
     }); 
    }); 

    }else{ 

    //if current window size not below breakpoint, return all th and td heights to original size; 

     $('#tablepress-999-no-2 tbody td').css('height','auto');  
     $('#tablepress-999-no-2 thead th').css('height','auto'); 

    }//end check breakpoint 

    })//end resize function 

}); 

在此先感謝您的幫助！

Answer 1

我認爲這裏有很多可避免的循環。但是，由於這隻適用於一個表格，您可以嘗試下面的代碼，它循環遍歷所有表格並應用您的邏輯。

$(window).resize(function(){ 
    $('table.tablepress').each(function() { 
     var responsivemode = $(this).attr('class').split(/ |-/); 

     // ALL BREAKPOINT CODE 

     if (parseInt($(window).width()) < breakpoint) { 

      var myobject = {}; 

      $(this).find("thead tr").each(function() { 
       // full my object code 
      }); 

      $(this).find("tbody tr").each(function() { 
       // myobject logic. I didn't understand much of it :P 
      }); 

      var $that = $(this); // refers to the table 

      $.each(myobject, function (keyobj, valueobj) { 
       $that.find("tbody tr td." + keyobj).each(function() { 
        $(this).height(valueobj); 
       }); 

       $that.find("thead th." + keyobj).each(function() { 
        $(this).height(valueobj); 
       }); 
      }); 
     } 
     else 
     { 
      $(this).find("tbody td").css('height', 'auto'); 
      $(this).find("thead th").css('height', 'auto'); 
     } 
    }); 
}); 

this關鍵字是指當前正在環狀的電流表元素。 .find()，得到this表中的所有匹配選擇器。

Answer 2

你可以改變這一點：

$("#tablepress-999-no-2 thead tr") 

到

$('table[id^="tablepress"] thead tr') 

，它將適用於有開始tablepress一個ID的所有表。