如何使 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')

它将适用于所有 id 以 tablepress 开头的表。