elektro:elch

Es ist nicht ungefährlich, wenn ein Volk lesen und schreiben kann.

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 responses to “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!

Leave a Reply

Your email address will not be published. Required fields are marked *