Version à utiliser
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* * Responsive Product List Table */ if($('.table-flip-scroll').length == 1){ if(getCurrentMediaQuery === 'small' || getCurrentMediaQuery === 'medium'){ /* * Harmonisation des hauteurs des rangées du tableau */ // ATTENTION: Placer un élément <div> avec la classe '.table-flip-scroll' autour du <table> function matchCellsHeights(columnIndex){ columnIndex++ var columnCellsHeights = $.map($('.table-flip-scroll th:nth-child('+columnIndex+'), .table-flip-scroll td:nth-child('+columnIndex+')'), function(val){ return $(val).outerHeight(); }); var columnHighestCell = Math.max.apply(null, columnCellsHeights); $('.table-flip-scroll th:nth-child('+columnIndex+'), .table-flip-scroll td:nth-child('+columnIndex+')').css('height', columnHighestCell +'px'); } var $th = $('.table-flip-scroll th'); $th.each(function(index){ matchCellsHeights(index); }); /* fin: Harmonisation des hauteurs des rangées du tableau */ } } |
Version obsolète
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// Si la classe .table-flip-scroll est présente sur un élément du DOM... if($('.table-flip-scroll').length == 1){ // [Foundation 6] Si la mediaquery en cours est small ou medium... if(getCurrentMediaQuery === 'small' || getCurrentMediaQuery === 'medium'){ // Initialisation d'une variable listHeight qui récupère la hauteur en PX de chanque cellule d'en-tête d'un tableau var listHeight = $.map($('.thead-first-row').children('th:not(.large)'), function(val){ return $(val).outerHeight(); }); // console.log(listHeight); // Pour chaque rangée dans le corps du tableau... $('.table-flip-scroll tbody tr:not(.sort)').each(function(){ // On initialise la variable 'count' à 0 (pour l'incrémenter ensuite) var count = 0; // Pour chaque cellule dans la rangée ciblée par le .each() parent... $(this).children('td').each(function(){ // L'incrémentation de count se fait ici; elle sert à assigner, pour chaque TD, l'une des valeurs récupérées et stockées dans le tableau plus haut $(this).css('height', listHeight[count ++] + 'px'); }); }); } } |
Code sans les commentaires:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
if($('.table-flip-scroll').length == 1){ if(getCurrentMediaQuery === 'small' || getCurrentMediaQuery === 'medium'){ var listHeight = $.map($('.thead-first-row').children('th:not(.large)'), function(val){ return $(val).outerHeight(); }); // console.log(listHeight); $('.table-flip-scroll tbody tr:not(.sort)').each(function(){ var count = 0; $(this).children('td').each(function(){ $(this).css('height', listHeight[count ++] + 'px'); }); }); } } |