Tabelle zeilenweise ausblenden mit jQuery

Möchte man mit jQuery einige Zeilen aus einer Tabelle ausblenden, so könnte man auf folgende einfache Lösung verfallen:

Ursprüngliche Tabelle:

Zeile 1
Zeile 2
Zeile 3

Tabelle mit <div> und checkbox:

Zeile 1
Zeile 2
Zeile 3
Zeile 2 verstecken

jQuery-Code zum Ausblenden der Zeile 2:

function hideshow() {
  if ($("#cb_test").attr("checked"))
    $("#test").hide();
  else 
    $("#test").show();
}

Dieser Ansatz funktioniert leider nicht, da es nicht möglich ist, Tabellen- und Textstrukturierungelemente zu mischen. Seit HTML 4 gibt es allerdings das <tbody>-Element, das man für diesen Zweck verwenden kann:

Zeile 1
Zeile 2
Zeile 3
Zeile 2 verstecken

Laut HTML-Validator des W3C ist diese Lösung „HTML 4.01 Transitional“-valide.

Comments

6 Kommentare zu „Tabelle zeilenweise ausblenden mit jQuery“

  1. hehe, da sucht man bei google nach jquery zeile ausblenden und findet dich als ersten link..
    so klein ist die virtuelle welt. 🙂
    Gruß Stefan

  2. LOL! Das ist wirklich lustig! Hoffe geholfen zu haben…

  3. Warum macht man das nicht per css und über IDs?

    function hideshow() {
    var obj=document.getElementById(‚t2′);
    if(obj.style.display==’none‘){
    obj.style.display=’inline‘;
    }
    else
    {
    obj.style.display=’none‘;
    }
    }

    1a
    1b
    1c

    2a
    2b
    2c

    hideshow

  4. statt inline ‚block‘

  5. Hi,

    wieso setzt ihr nicht einfach eine id=“zeileX“ in das und versteckt es einfach mit $(„#zeileX“).hide() ? 😉

  6. Vielen Dank für die Infos, genau das hab ich gesucht!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Falls du auf diesen Beitrag mit einem Artikel auf deiner eigenen Webseite geantwortet hast, kannst du hier die URL deines Beitrags eingeben. Dabei sollte es sich um die Permalink-URL handeln. Deine Antwort wird dann (möglicherweise nach der Moderation) auf dieser Seite angezeigt. Falls du deine Antwort aktualisieren oder entfernen möchtest, aktualisiere oder lösche deinen Beitrag auf deiner eigenen Webseite und gib die URL des Beitrags erneut ein. (Erfahre mehr über Webmentions.)