Spalte in einer HTML-Tabelle ein- / ausblenden

Ich habe eine HTML-Tabelle mit mehreren Spalten und muss eine Spaltenauswahl mit jquery implementieren. Wenn ein Benutzer auf ein Kontrollkästchen klickt, möchte ich die entsprechende Spalte in der Tabelle ausblenden / einblenden. Ich möchte dies tun, ohne jedem td in der Tabelle eine Klasse zuzuordnen. Gibt es eine Möglichkeit, eine ganze Spalte mit jquery auszuwählen? Unten finden Sie ein Beispiel für 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>

Ich würde dies gerne tun, ohne jedem td eine Klasse zuzuordnen

Persönlich würde ich mich für den Class-on-Each-Td / Th / Col-Ansatz entscheiden. Anschließend können Sie Spalten mit einem einzigen Schreibvorgang in className im Container ein- und ausschalten. Dabei werden folgende Stilregeln angenommen:

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

Dies wird schneller sein als jeder JS-Loop-Ansatz. Bei sehr langen Tischen kann sich dies erheblich auf die Reaktionsfähigkeit auswirken.

Wenn Sie nicht IE6 unterstützen, können Sie Adjazenz-Selektoren verwenden, um zu vermeiden, dass Sie die Klassenattribute zu tds hinzufügen müssen. Wenn Sie das Markup sauberer machen möchten, können Sie es alternativ in einem Initialisierungsschritt automatisch aus JavaScript hinzufügen.

Eine Codezeile mit jQuery, die die 2. Spalte verbirgt:

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

Wenn Ihre Tabelle einen Header (th) hat, verwenden Sie diesen:

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

Quelle: Eine Tabellenspalte mit einer einzelnen Zeile jQuery-Code ausblenden

jsFiddle zum Testen des Codes: http://jsfiddle.net/mgMem/1/

Wenn Sie einen guten Anwendungsfall sehen möchten, schauen Sie sich meinen Blog-Beitrag an:

Blenden Sie eine Tabellenspalte aus und färben Sie Zeilen basierend auf dem Wert mit jQuery ein .

Sie könnten Colgroups verwenden:

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

Ihr Skript könnte dann nur die Wunschklasse ändern <col>.

Folgendes sollte es tun:

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

Dies ist nicht getesteter Code, aber das Prinzip ist, dass Sie die Tabellenzelle in jeder Zeile auswählen, die dem ausgewählten Index entspricht, der aus dem Namen des Kontrollkästchens extrahiert wurde. Sie können die Selektoren natürlich mit einer Klasse oder einer ID einschränken.

Hier ist eine etwas ausführlichere Antwort, die eine Benutzerinteraktion pro Spalte ermöglicht. Wenn dies eine dynamische Erfahrung sein soll, muss für jede Spalte ein anklickbarer Schalter vorhanden sein, der angibt, ob die Spalte ausgeblendet werden kann, und anschließend eine Möglichkeit, zuvor ausgeblendete Spalten wiederherzustellen.

Das würde in JavaScript ungefähr so ​​aussehen:

$('.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()

})

Um dies zu unterstützen, fügen wir der Tabelle ein Markup hinzu. In jeder Spaltenüberschrift können wir so etwas hinzufügen, um einen visuellen Indikator für etwas anklickbares zu liefern

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

Wir erlauben dem Benutzer, Spalten über einen Link in der Tabellenfußzeile wiederherzustellen. Wenn es standardmäßig nicht dauerhaft ist, kann das dynamische Umschalten in der Kopfzeile um die Tabelle drängen, aber Sie können es wirklich überall platzieren, wo Sie möchten:

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

Das ist die Grundfunktionalität. Hier ist eine Demo mit ein paar weiteren Dingen. Sie können der Schaltfläche auch einen Tooltip hinzufügen, um ihren Zweck zu verdeutlichen, die Schaltfläche etwas organischer in eine Tabellenüberschrift einfügen und die Spaltenbreite reduzieren, um einige (etwas wackelige) CSS-Animationen hinzuzufügen, um den Übergang etwas zu verkürzen nervös.

Arbeitsdemo in 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>

Und natürlich die CSS-Möglichkeit nur für Browser, die Folgendes unterstützen nth-child :

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

Dies ist für IE9 und neuer.

Für Ihren Anwendungsfall benötigen Sie mehrere Klassen, um die Spalten auszublenden:

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

ect ...

Das Folgende baut auf Erans Code auf, mit ein paar geringfügigen Änderungen. Getestet und es scheint gut auf Firefox 3, IE7 zu funktionieren.

<!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>

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

Ohne Klasse? Sie können das Tag dann verwenden:

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

Und um ihnen zu zeigen, verwenden Sie:

...style.display = 'table-cell';