Comment faire pour que le script jQuery s'applique à plusieurs tables html

Question

Je suis assez nouveau dans jQuery mais j'ai réussi à développer un script qui manipule les hauteurs des tags th et td à des points d'arrêt particuliers. Il cherche essentiellement le th ou td le plus élevé dans chaque rangée d'une table donnée et applique cette hauteur à toutes les étiquettes th et td dans cette rangée particulière, puis passe à la ligne suivante, etc.

Le script est nécessaire en raison de un plugin Wordpress défectueux qui altère à tort l'apparence des tables à des points d'arrêt particuliers. Le plugin est essentiel à notre développement et ne peut pas être modifié, nous devons donc utiliser jQuery pour manipuler l'apparence de la table.

Tout fonctionne bien, mais maintenant je dois le faire fonctionner pour plusieurs tables affichées sur une page donnée.

Chaque table a la classe « tablepress » et je l'ai essayé autour de notre script avec

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

...our script... 

}) 

mais qui ne fonctionne pas et la logique se brise mon esprit :)

Voici notre 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 

}); 

Merci d'avance pour toute aide!

Answer 1

Je pense qu'il y a beaucoup de boucles évitables dans ce domaine. Mais comme cela fonctionne pour une table, vous pouvez essayer le code suivant, qui parcourt toutes les tables et applique votre logique.

$(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 mot-clé fait référence à l'élément de table en cours actuellement en boucle. .find(), obtient tous les sélecteur correspondant dans la table this.

Answer 2

vous pouvez le modifier:

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

à

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

et il appliquera à toutes les tables qui ont une carte d'identité en commençant par tablepress.