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

Your post must include a link to this post.

How does this work?
Write a response on your own website and include a link to this post. Then submit your response’s URL here. Your response may appear here after moderation. To update or remove it, edit or delete your original post and submit the same URL again. Learn more about Webmentions.