web-dev-qa-db-fra.com

Masquer / Afficher la colonne dans un tableau HTML

J'ai un tableau HTML avec plusieurs colonnes et je dois implémenter un sélecteur de colonnes à l'aide de jquery. Lorsqu'un utilisateur clique sur une case à cocher, je souhaite masquer/afficher la colonne correspondante dans le tableau. Je voudrais faire ceci sans attacher une classe à chaque td de la table, y a-t-il un moyen de sélectionner une colonne entière en utilisant jquery? Vous trouverez ci-dessous un exemple de code HTML.

<table>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>
jqueryhtmlhidehtml-tableshow
144
Brian Fisher

Je voudrais faire cela sans attacher une classe à chaque td

Personnellement, je choisirais l’approche classe-sur-chaque-td/th/col. Ensuite, vous pouvez activer et désactiver les colonnes en utilisant une seule écriture dans className sur le conteneur, en supposant des règles de style telles que:

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

Cela va être plus rapide que n'importe quelle approche de boucle JS; pour de très longues tables, cela peut avoir un impact significatif sur la réactivité.

Si vous ne pouvez pas supporter IE6, vous pouvez utiliser des sélecteurs de contiguïté pour éviter d'avoir à ajouter les attributs de classe à tds. Ou bien, si votre préoccupation est de rendre le balisage plus propre, vous pouvez les ajouter automatiquement à partir de JavaScript lors d'une étape d'initialisation.

83
bobince

Une ligne de code utilisant jQuery qui cache la 2ème colonne:

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

Si votre table a un en-tête (th), utilisez ceci:

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

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

jsFiddle pour tester le code: http://jsfiddle.net/mgMem/1/

Si vous voulez voir un bon cas d'utilisation, jetez un coup d'œil à mon article de blog:

Cache une colonne de table et colorise les lignes en fonction de la valeur avec jQuery .

238
Leniel Maccaferri

vous pouvez utiliser colgroups:

<table>
    <colgroup>
       <col class="visible_class"/>
       <col class="visible_class"/>
       <col class="invisible_class"/>  
    </colgroup>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

votre script pourrait alors changer uniquement le désir <col> classe.

11
Luis Melgratti

Ce qui suit devrait le faire:

$("input[type='checkbox']").click(function() {
    var index = $(this).attr('name').substr(2);
    $('table tr').each(function() { 
        $('td:eq(' + index + ')',this).toggle();
    });
});

Il s'agit d'un code non testé, mais le principe est que vous choisissez, dans chaque ligne, la cellule du tableau qui correspond à l'index choisi extrait du nom de la case à cocher. Vous pouvez bien sûr limiter les sélecteurs avec une classe ou un identifiant.

10
Eran Galperin

Voici une réponse un peu plus complète offrant une interaction utilisateur par colonne. Si cela doit être une expérience dynamique, il doit y avoir une bascule cliquable sur chaque colonne indiquant la possibilité de masquer la colonne, puis un moyen de restaurer des colonnes précédemment masquées.

Cela ressemblerait à quelque chose comme ça en JavaScript:

$('.hide-column').click(function(e){
  var $btn = $(this);
  var $cell = $btn.closest('th,td')
  var $table = $btn.closest('table')

  // get cell location - https://stackoverflow.com/a/4999018/1366033
  var cellIndex = $cell[0].cellIndex + 1;

  $table.find(".show-column-footer").show()
  $table.find("tbody tr, thead tr")
        .children(":nth-child("+cellIndex+")")
        .hide()
})

$(".show-column-footer").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".show-column-footer").hide()
    $table.find("th, td").show()

})

Pour supporter cela, nous allons ajouter du balisage à la table. Dans chaque en-tête de colonne, nous pouvons ajouter quelque chose comme ceci pour fournir un indicateur visuel de quelque chose de cliquable.

<button class="pull-right btn btn-default btn-condensed hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>

Nous autoriserons l'utilisateur à restaurer les colonnes via un lien dans le pied de page du tableau. Si ce n'est pas persistant par défaut, alors l'activer dynamiquement dans l'en-tête pourrait se bousculer autour de la table, mais vous pouvez vraiment le placer n'importe où:

<tfoot class="show-column-footer">
   <tr>
    <th colspan="4"><a class="show-column" href="#">Some columns hidden - click to show all</a></th>
  </tr>
</tfoot>

C'est la fonctionnalité de base. Voici une démo ci-dessous avec quelques éléments supplémentaires. Vous pouvez également ajouter une info-bulle au bouton pour clarifier son objectif, lui attribuer un style un peu plus organique à un en-tête de tableau et réduire la largeur de la colonne afin d'ajouter des animations (quelque peu wachées) css afin de réduire légèrement la transition. nerveux.

Demo Screengrab

Démo de travail dans jsFiddle & Stack Snippets:

$(function() {
  // on init
  $(".table-hideable .hide-col").each(HideColumnIndex);

  // on click
  $('.hide-column').click(HideColumnIndex)

  function HideColumnIndex() {
    var $el = $(this);
    var $cell = $el.closest('th,td')
    var $table = $cell.closest('table')

    // get cell location - https://stackoverflow.com/a/4999018/1366033
    var colIndex = $cell[0].cellIndex + 1;

    // find and hide col index
    $table.find("tbody tr, thead tr")
      .children(":nth-child(" + colIndex + ")")
      .addClass('hide-col');
      
    // show restore footer
    $table.find(".footer-restore-columns").show()
  }

  // restore columns footer
  $(".restore-columns").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".footer-restore-columns").hide()
    $table.find("th, td")
      .removeClass('hide-col');

  })

  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover'
  })

})
body {
  padding: 15px;
}

.table-hideable td,
.table-hideable th {
  width: auto;
  transition: width .5s, margin .5s;
}

.btn-condensed.btn-condensed {
  padding: 0 5px;
  box-shadow: none;
}


/* use class to have a little animation */
.hide-col {
  width: 0px !important;
  height: 0px !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>




<table class="table table-condensed table-hover table-bordered table-striped table-hideable">

  <thead>
    <tr>
      <th>
        Controller
        <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button>
      </th>
      <th class="hide-col">
        Action
        <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button>
      </th>
      <th>
        Type
        <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button>
      </th>
      <th>
        Attributes
        <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          <i class="fa fa-eye-slash"></i>  
        </button>
      </th>
  </thead>
  <tbody>

    <tr>
      <td>Home</td>
      <td>Index</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Index</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Edit</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

  </tbody>
  <tfoot class="footer-restore-columns">
    <tr>
      <th colspan="4"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
    </tr>
  </tfoot>
</table>
6
KyleMit

Et bien sûr, le seul moyen CSS pour les navigateurs qui le supportentnth-child:

table td:nth-child(2) { display: none; }

Ceci est pour IE9 et plus récent.

Pour votre cas d'utilisation, vous aurez besoin de plusieurs classes pour masquer les colonnes:

.hideCol1 td:nth-child(1) { display: none;}
.hideCol2 td:nth-child(2) { display: none;}

ect ...

3
ProblemsOfSumit

Ce qui suit s'appuie sur le code d'Eran, avec quelques modifications mineures. Testé et cela semble fonctionner correctement sur Firefox 3, IE7.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
    $('input[type="checkbox"]').click(function() {
        var index = $(this).attr('name').substr(3);
        index--;
        $('table tr').each(function() { 
            $('td:eq(' + index + ')',this).toggle();
        });
        $('th.' + $(this).attr('name')).toggle();
    });
});
</script>
<body>
<table>
<thead>
    <tr>
        <th class="col1">Header 1</th>
        <th class="col2">Header 2</th>
        <th class="col3">Header 3</th>
    </tr>
</thead>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>
</body>
</html>
1
Paolo Bergantino
<p><input type="checkbox" name="ch1" checked="checked" /> First Name</p>
.... 
<td class="ch1">...</td>

 <script>
       $(document).ready(function() {
            $('#demo').multiselect();
        });


        $("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).hide();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});
 </script>
1
lahbib

Sans cours? Vous pouvez utiliser le tag alors:

var tds = document.getElementsByTagName('TD'),i;
for (i in tds) {
  tds[i].style.display = 'none';
}

Et pour leur montrer utiliser:

...style.display = 'table-cell';
0
Gustavo Ruiz