HOWTO · JavaScript
Tabellenzeilen in JavaScript ausblenden
JavaScript muss nicht zwingend über eine vordefinierte Funktion verfügen, die Tabelleninhalte direkt ausblenden kann. Genauer gesagt gibt es die toggle()-Funktion und die hide(), show()-Funktion von jQuery, die nacheinander ausgeführt werden, um die Zeilen zu drücken und sie zu erweitern.
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 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:
