JavaScript – nächste Reihe in einer Tabelle finden und einblenden

Nachfolgend ein kurzes Script zum ermitteln der nächsten ausgeblendeten Reihe (tr) in einer Tabelle (table) und anzeigen dieser.

HTML

<table>
<tr><td>Text1</td><td><button class=”show-row”></button></td></tr>
<tr style=”display:none;”><td>Text2</td><td>Text3</td></tr>
</table>

Script

jQuery(“.show-row”).click(function(){
Status = jQuery(this).closest(“tr”).next().css(“display”);
if(Status == ‘none’){
jQuery(this).closest(“tr”).next().css(“display”, “inline”);
}else{
jQuery(this).closest(“tr”).next().css(“display”, “none”);
}
});

Es wird eine Tabelle mit einer Zeile angezeigt, die zweite ist ausgeblendet. Wird auf den Button gedrückt, wird die zweite Zeile eingeblendet.

JARVIS

Interessiert in verschiedenste IT Themen, schreibe ich in diesem Blog über Software, Hardware, Smart Home, Games und vieles mehr. Ich berichte z.B. über die Installation und Konfiguration von Software als auch von Problemen mit dieser. News sind ebenso spannend, sodass ich auch über Updates, Releases und Neuigkeiten aus der IT berichte. Letztendlich nutze ich Taste-of-IT als eigene Dokumentation und Anlaufstelle bei wiederkehrenden Themen. Ich hoffe ich kann dich ebenso informieren und bei Problemen eine schnelle Lösung anbieten. Wer meinen Aufwand unterstützen möchte, kann gerne eine Tasse oder Pod Kaffe per PayPal spenden – vielen Dank.