Tabellenzeilen in JavaScript ausblenden

Um ausgewählte Tabellenzeilen nach einem Klick ein- oder auszublenden, versehen Sie zusammengehörige Zeilen mit einer gemeinsamen Klasse und wählen diese Klasse mit jQuery aus. Verwenden Sie toggle(), wenn ein Bedienelement zwischen beiden Zuständen wechseln soll, oder hide() und show() für getrennte Bedienelemente. Für die folgenden Beispiele muss jQuery einmal geladen werden. Browser-JavaScript kann die Sichtbarkeit ebenfalls über das DOM und CSS ändern; jQuery bietet praktische Methoden, um Elemente auszuwählen und zu aktualisieren.

Tabellenzeilen in JavaScript mit jQuerys toggle()-Funktion ausblenden

Geben Sie jeder Gruppe von Detailzeilen eine Kategorieklasse und tragen Sie diese Kategorie im Attribut data-prod-cat des zugehörigen Bedienelements ein. So ist jeder Auslöser nur mit den passenden Zeilen verknüpft. Die Zeilen sind anfangs mit style="display:none" ausgeblendet, sodass jQuerys Anzeigemethoden sie einblenden können. Verwenden Sie daneben keine separate CSS-Regel, die die Zeilen weiterhin ausgeblendet hält. Der Klick-Handler verhindert, dass ein Link zu # navigiert.

Laden Sie das jQuery-Skript wie im Beispiel vor dem Code, der $ verwendet. Der Ready-Callback wartet, bis das Dokument-Markup verfügbar ist, bevor er die Handler hinzufügt. Eine fehlende oder fehlgeschlagene jQuery-Einbindung kann er jedoch nicht ausgleichen. Für weitere Kategorien müssen Klassennamen und Datenwerte übereinstimmen: Der Wert 3 wählt .cat3 aus, andere Zeilenklassen bleiben unberührt. Verwenden Sie für ein Bedienelement einen Button mit type="button", damit er kein umgebendes Formular absendet.

Führen Sie dieses Beispiel aus:

const rows = [
  { category: 1, visible: false },
  { category: 1, visible: false },
  { category: 2, visible: false }
];

function toggleCategory(category) {
  for (const row of rows) {
    if (row.category === category) row.visible = !row.visible;
  }
}

toggleCategory(1);
console.log(rows.map(row => row.visible ? "shown" : "hidden").join(", "));

shown, shown, hidden

Diese kleine JavaScript-Veranschaulichung zeigt, wie die Kategorien zugeordnet werden. Im Browser wendet jQuery dasselbe Prinzip auf Tabellenzeilen an:

<table>
  <tbody>
    <tr>
      <th scope="row">Oranges</th><td>100</td>
      <td><a href="#" class="toggler" data-prod-cat="1">Toggle oranges</a></td>
    </tr>
    <tr class="cat1" style="display:none"><td></td><td>120</td><td></td></tr>
    <tr class="cat1" style="display:none"><td></td><td>140</td><td></td></tr>
    <tr>
      <th scope="row">Apples</th><td>100</td>
      <td><a href="#" class="toggler" data-prod-cat="2">Toggle apples</a></td>
    </tr>
    <tr class="cat2" style="display:none"><td></td><td>120</td><td></td></tr>
    <tr class="cat2" style="display:none"><td></td><td>140</td><td></td></tr>
  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $(".toggler").on("click", function (event) {
    event.preventDefault();
    const category = $(this).attr("data-prod-cat");
    $(".cat" + category).toggle();
  });
});
</script>

Der Selektor wird aus der Kategorie des angeklickten Links gebildet. Ein Klick auf das Bedienelement wirkt daher nur auf .cat1. Die sichtbare Beschriftung dieses Bedienelements lautet im unveränderten Beispiel „Toggle oranges“ und bleibt auf Englisch. Auch die getrennten Bedienelemente des zweiten Beispiels sind mit „Hide rows“ und „Show rows“ auf Englisch beschriftet. Ein weiterer Klick auf den Umschalter blendet die Zeilen wieder aus. Die Klasse jeder Detailzeile muss genau dem Kategorienwert entsprechen; andernfalls findet der Selektor die Zeile nicht. Wenn das Bedienelement nicht navigieren soll, verwenden Sie statt eines Links ein <button type="button">; dann ist preventDefault() nicht nötig. Da die Zeilen anfangs display:none haben, blendet der erste Klick sie ein und der nächste wieder aus. Sollen sie anfangs sichtbar sein, entfernen Sie diesen Stil; dann blendet der erste Klick sie aus.

Tabellenzeilen in JavaScript mit jQuerys show()- und hide()-Funktionen ausblenden

Verwenden Sie getrennte Bedienelemente, wenn die jeweilige Aktion ausdrücklich feststehen soll, statt bei jedem Klick umzuschalten. Weisen Sie den Zeilen, auf die beide Bedienelemente wirken, dieselbe Klasse zu. Beginnen Sie mit display:none, damit die erste Einblendaktion die Zeilen sichtbar macht. Sollen sie anfangs sichtbar sein, lassen Sie diesen Stil weg; dann bewirkt das Ausblenden die erste Änderung. Wenn die Tabelle mehrere Gruppen enthält, können die Bedienelemente statt .detail-row auch eine klassenspezifische Kategorie ansprechen.

<table>
  <tbody>
    <tr><th scope="row">Oranges</th><td>100</td></tr>
    <tr class="detail-row" style="display:none"><td>Extra quantity</td><td>120</td></tr>
    <tr class="detail-row" style="display:none"><td>Reserve quantity</td><td>140</td></tr>
  </tbody>
</table>
<button id="hide-rows" type="button">Hide rows</button>
<button id="show-rows" type="button">Show rows</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $("#hide-rows").on("click", function () {
    $(".detail-row").hide();
  });
  $("#show-rows").on("click", function () {
    $(".detail-row").show();
  });
});
</script>

hide() setzt die Anzeige der ausgewählten Zeilen auf none; show() stellt einen geeigneten Anzeigestatus wieder her, sodass die Zeilen am Tabellenlayout teilnehmen. Setzen Sie eine Zeile nicht pauschal auf display: block, um sie einzublenden, denn dadurch bleibt ihr normales Tabellenzeilenlayout nicht erhalten. Da diese Zeilen anfangs ausgeblendet sind, blendet das Bedienelement zum Anzeigen sie ein und kann gefahrlos erneut angeklickt werden; das Bedienelement zum Ausblenden blendet sie ausdrücklich aus. toggle() kehrt dagegen bei jedem Klick den aktuellen Zustand um und eignet sich daher für einen einzelnen Umschalter. Getrennte Bedienelemente mit show() und hide() sind sinnvoll, wenn Nutzer eindeutige Aktionen benötigen, etwa eine Gruppe jederzeit wieder einblenden können sollen.