web-dev-qa-db-fra.com

afficher / masquer les colonnes de table html à l'aide de css

Je souhaite afficher un tableau html de base avec des contrôles pour basculer l'affichage/le masquage de colonnes supplémentaires:

<table id="mytable">
    <tr>
        <th>Column 1</th>
        <th class="col1">1a</th>
        <th class="col1">1b</th>
        <th>Column 2</th>
        <th class="col2">2a</th>
        <th class="col2">2b</th>
    </tr>
    <tr>
        <td>100</td>
        <td class="col1">40</td>
        <td class="col1">60</td>
        <td>200</td>
        <td class="col2">110</td>
        <td class="col2">90</td>
    </tr>
</table>

Ainsi, la colonne 1 et la colonne 2 seront les seules colonnes affichées par défaut - mais lorsque vous cliquez sur la colonne 1, je veux que 1a et 1b bascule, et la même chose avec la colonne 2 avec 2a et 2b. Je peux me retrouver avec plus de colonnes et beaucoup de lignes - donc toutes les approches de bouclage javascript ont été trop lentes à travailler lorsque j'ai testé.

La seule approche qui semble être assez rapide est de configurer des CSS comme celui-ci:

table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
table.hide3 .col3 { display: none; }

table.show1 .col1 { display: table-cell; }
table.show2 .col2 { display: table-cell; }
table.show3 .col3 { display: table-cell; }

Et ensuite, configurez les appels de fonction onClick sur les cellules d'en-tête du tableau qui déclencheront une bascule - et déterminez la classe css à laquelle "mytable" doit créer qui créera l'effet de bascule que je recherche. Existe-t-il un moyen simple de configurer cela afin que le code puisse fonctionner pour n # de colonnes?

Mise à jour

Voici ce que j'ai trouvé, qui fonctionne très bien - et très rapidement. Faites-moi savoir si vous pouvez penser à des améliorations.

CSS

.col1 {display: none; }
.col2 {display: none; }
.col3 {display: none; }

table.show1 .col1 { display: table-cell; }
table.show2 .col2 { display: table-cell; }
table.show3 .col3 { display: table-cell; }

Javascript

function toggleColumn(n) {
    var currentClass = document.getElementById("mytable").className;
    if (currentClass.indexOf("show"+n) != -1) {
        document.getElementById("mytable").className = currentClass.replace("show"+n, "");
    }
    else {
        document.getElementById("mytable").className += " " + "show"+n;
    }
}

Et l'extrait html:

<table id="mytable">
<tr>
    <th onclick="toggleColumn(1)">Col 1 = A + B + C</th>
    <th class="col1">A</th>
    <th class="col1">B</th>
    <th class="col1">C</th>
    <th onclick="toggleColumn(2)">Col 2 = D + E + F</th>
    <th class="col2">D</th>
    <th class="col2">E</th>
    <th class="col2">F</th>
    <th onclick="toggleColumn(3)">Col 3 = G + H + I</th>
    <th class="col3">G</th>
    <th class="col3">H</th>
    <th class="col3">I</th>
</tr>
<tr>
    <td>20</td>
    <td class="col1">10</td>
    <td class="col1">10</td>
    <td class="col1">0</td>
    <td>20</td>
    <td class="col2">10</td>
    <td class="col2">8</td>
    <td class="col2">2</td>
    <td>20</td>
    <td class="col3">10</td>
    <td class="col3">8</td>
    <td class="col3">2</td>
</tr>
</table>
javascripthtmlcsshtml-table
36
Art Peterson

Non, c'est à peu près tout. En théorie, vous pourriez utiliser visibility: collapse sur certains <col> S pour le faire, mais le support du navigateur n'est pas tout.

Pour améliorer légèrement ce que vous avez, vous pouvez utiliser table-layout: fixed sur le <table> pour permettre au navigateur d'utiliser l'algorithme de mise en page fixe plus simple, plus rapide et plus prévisible. Vous pouvez également supprimer le .show règle comme quand une cellule n'est pas créée display: none par un .hide règle, ce sera automatiquement display: table-cell. Permettre à l'affichage de table de revenir à la valeur par défaut plutôt que de le définir évite explicitement les problèmes dans IE <8, où les valeurs d'affichage de table ne sont pas prises en charge.

20
bobince

Une ligne de code utilisant jQuery:

$('td:nth-child(2)').hide();

// If your table has header(th), use this:
//$('td:nth-child(2),th:nth-child(2)').hide();

Source: Masquer une colonne de tableau avec une seule ligne de code jQuery

36
Leniel Maccaferri

si vous cherchez un masque de colonne simple, vous pouvez également utiliser le sélecteur: nth-child.

#tableid tr td:nth-child(3),
#tableid tr th:nth-child(3) {
    display: none;
}

Je l'utilise parfois avec la balise @media pour condenser des tableaux plus larges lorsque l'écran est trop étroit.

14
Ponyboy

Je ne pense pas qu'il y ait quoi que ce soit que vous puissiez faire pour éviter ce que vous faites déjà, cependant, si vous créez la table sur le client avec javascript, vous pouvez toujours ajouter les règles de style de manière dynamique, de sorte que vous pouvez autoriser un nombre illimité de colonnes sans encombrer votre fichier css avec toutes ces règles. Voir http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript si vous ne savez pas comment procéder.

Edit: Pour votre bascule "collant", vous devez simplement ajouter des noms de classe plutôt que de les remplacer. Par exemple, vous pouvez lui donner un nom de classe "hide2 hide3" etc. Je ne pense pas que vous ayez vraiment besoin des classes "show", car ce serait la valeur par défaut. Les bibliothèques comme jQuery rendent cela facile, mais en l'absence, une fonction comme celle-ci pourrait aider:

var modifyClassName = function (elem, add, string) {
var s = (elem.className) ? elem.className : "";
var a = s.split(" ");
if (add) {
  for (var i=0; i<a.length; i++) {
      if (a[i] == string) {
          return;
          }
      }
  s += " " + string;
  }
else {
    s = "";
    for (var i=0; i<a.length; i++) {
        if (a[i] != string)
            s += a[i] + " "; 
        }
    }
elem.className = s;
}
1
rob