Hide / Show Spalte in einer HTML-Tabelle

Question

Ich habe eine HTML-Tabelle mit mehreren Spalten und ich brauche eine Spaltenauswahl mit Jquery zu implementieren. Wenn ein Benutzer auf eine Checkbox klickt ich ausblenden möchten / zeigen die entsprechende Spalte in der Tabelle. Ich möchte, dies zu tun, ohne eine Klasse zu jedem td in der Tabelle angebracht wird, ist es eine Möglichkeit, eine ganze Spalte mit Jquery zu wählen? Im Folgenden finden Sie ein Beispiel für die 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>

Answer 1

  

Ich möchte, dies zu tun, ohne eine Klasse zu jedem td zu Anbringen

Persönlich würde ich mit dem Klasse-on-jeder-td / th / col Ansatz gehen. Dann können Sie Spalten ein- und ausschalten auf den Behälter einen einzigen Schreibvorgang auf Klassennamen verwendet, Stil unter der Annahme Regeln wie:

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

Das wird schneller sein als jeder JS Loop-Ansatz; für wirklich lange Tabellen kann es einen signifikanten Unterschied zu Ansprechbarkeit machen.

Wenn Sie mit nicht unterstützen IE6 wegkommen können, könnten Sie adjacency Selektoren zu vermeiden, dass die Klasse in den tds Attribute. Oder alternativ, wenn Ihr Anliegen des Markup sauberer macht, man konnte sich von JavaScript hinzufügen automatisch in einem Initialisierungsschritt.

Answer 2

Eine Zeile Code mit jQuery, die die zweite Spalte versteckt:

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

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

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

Quelle: Ausblenden einer Tabellenspalte mit einer einzigen Zeile von jQuery-Code

jsFiddle den Code zu testen: http://jsfiddle.net/mgMem/1/

---

Wenn Sie einen guten Anwendungsfall sehen möchten, werfen Sie einen Blick auf mein Blog-Post:

eine Tabellenspalte ausblenden und kolorieren Zeilen basierend auf Wert mit jQuery .

Answer 3

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 ändern Sie einfach den Wunsch <col> Klasse.

Answer 4

Im Folgenden soll 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 ungetestet Code, aber das Prinzip ist, dass Sie die Tabellenzelle in jeder Zeile wählen, die aus dem Kontrollkästchen Namen extrahiert, um den gewählten Index entspricht. Sie könnten die Wähler mit einer Klasse natürlich begrenzen oder einer ID.

Answer 5

Hier ist ein wenig mehr voll funktionsfähige Antwort, die eine Interaktion mit dem Benutzer auf einer pro Spalte-Basis zur Verfügung stellt. Wenn dies ein dynamisches Erlebnis sein wird, muss es einen klickbaren Knebel auf jeder Spalte sein, die die Fähigkeit gibt die Spalte zu verbergen, und dann einen Weg bisher verborgene Spalten wiederherzustellen.

Das so etwas in JavaScript 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, werden wir einige Markup auf den Tisch. In jedem Spaltenkopf können wir so etwas wie dieses Add einen visuellen Indikator für etwas zu bieten klickbare

<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 werden dem Benutzer erlauben, Spalten über einen Link in der Tabelle Fußzeile wiederherzustellen. Wenn es nicht standardmäßig persistent ist, Makel es dann auf dynamisch im Header um den Tisch herum drängeln konnte, aber man kann es wirklich setzt überall Sie mögen:

<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 grundlegende Funktionalität. Hier ist eine Demo unten mit ein paar mehr Dinge konkretisiert. Sie können auch einen Tooltip die Schaltfläche hinzufügen, um seinen Zweck, Stil die Taste ein wenig mehr organisch zu einem Tabellenkopf zu klären und kollabieren die Spaltenbreite, um einige (etwas wackelig) CSS-Animationen hinzufügen, um den Übergang ein bisschen weniger zu machen schreckhaft.

Arbeits Demo in jsFiddle und 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>

Answer 6

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

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

Dies ist für IE9 und neuer.

Für Ihre usecase, dann würden Sie mehrere Klassen müssen die Spalten ausblenden:

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

ect ...

Answer 7

Im folgenden wird auf Eran Code Aufbau, mit ein paar kleinen Änderungen. Getestet und es scheint, auf Firefox 3, Internet Explorer 7 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>

Answer 8

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

Answer 9

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

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

Und um zu zeigen, sie verwenden:

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