Tabellenzeilen in JavaScript ausblenden

  2. How-To's
  3. JavaScript-Anleitungen
  4. Tabellenzeilen in JavaScript ausblenden
Anika Tabassum Era 15 Februar 2024
JavaScript JavaScript Table
  1. Verwenden Sie die toggle()-Funktion von jQuery, um Tabellenzeilen in JavaScript auszublenden
  2. Verwenden Sie die Funktionen show() und hide() von jQuery, um Tabellenzeilen in JavaScript auszublenden
Tabellenzeilen in JavaScript ausblenden

In JavaScript können wir bestimmte Tabellendaten unter einer gemeinsamen Klasse definieren, die eine Funktion hat, mit der sie zusammenarbeiten können. Diese spezielle Funktion deklariert, wie sich die Zeilen dieser Tabelle bei selektiven Triggern verhalten.

Mit einfachen Worten, eine Schaltfläche oder ein Link-Tag löst eine Funktion aus, die Details zum Ausblenden und Anzeigen von Tabellenzeilen enthält.

Hier konzentrieren wir uns in unseren Beispielen auf die jQuery-Funktion toggle() sowie die Funktionen show() und hide(). Beide Möglichkeiten führen zu Zeilenerweiterung und -schrumpfung.

Lassen Sie uns in die Codezäune springen.

Verwenden Sie die toggle()-Funktion von jQuery, um Tabellenzeilen in JavaScript auszublenden

Das Beispiel nimmt Tabellenzeilen und setzt sie auf display: "none". Und wenn auf ein bestimmtes anchor-Tag geklickt wird, wird die aktuelle Stufe auf display: "block" umdefiniert.

Dieser Prozess verläuft umgekehrt, und so erhalten wir das erwartete Ergebnis. Die folgenden Codezeilen demonstrieren den Rest.

Code-Auszug:

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<table>
    <tr>
        <td>Oranges</td>
        <td>100</td>
        <td><a href="#" class="toggler" data-prod-cat="1">+</a></td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>120</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>140</td>
    </tr>
    <tr>
        <td>Apples</td>
        <td>100</td>
        <td><a href="#" class="toggler" data-prod-cat="2">+</a></td>
    </tr>
    <tr class="cat2" style="display:none">
        <td></td>
        <td>120</td>
    </tr>
    <tr class="cat2" style="display:none">
        <td></td>
        <td>140</td>
    </tr>
</table>

$(document).ready(function() {
  $('.toggler').click(function(e) {
    e.preventDefault();
    $('.cat' + $(this).attr('data-prod-cat')).toggle();
  });
});

Ausgabe:

Verwenden Sie die Funktion jQuery toggle(), um Tabellenzeilen auszublenden

Verwenden Sie die Funktionen show() und hide() von jQuery, um Tabellenzeilen in JavaScript auszublenden

Wir werden zwei anklickbare Elemente haben; einer führt aus, um die Tabellenzeilen darzustellen, und der andere verkleinert die Zeilen. Das vorherige Beispiel hatte eine anklickbare, um die Aufgabe des Ein- und Ausblendens von Zeilen zu erledigen.

Aber wir werden eine separate Möglichkeit haben, dieselbe Aufgabe zu erledigen. Lassen Sie uns den Codeblock überprüfen.

Code-Auszug:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $(".cat1").hide();
  });
  $("#show").click(function(){
    $(".cat1").show();
  });
});
</script>
</head>
<body>
  <table>
    <tr>
        <td>Oranges</td>
        <td>100</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>120</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>140</td>
    </tr>
    </table>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

Ausgabe:

Verwenden Sie die Funktionen show() und hide() von jQuery, um Tabellenzeilen auszublenden

Autor: Anika Tabassum Era
Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Verwandter Artikel - JavaScript Table