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 Antworten 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

To respond on your own website, enter the URL of your response which should contain a link to this post’s permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post’s URL again. (Find out more about Webmentions.)