elektro:elch

Tabelle zeilenweise ausblenden mit jQuery

Written by

latz

in

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. Stefan Knaak avatar
    Stefan Knaak

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

    Reply
  2. Latz avatar
    Latz

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

    Reply
  3. Andreas K. avatar
    Andreas K.

    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

    Reply
  4. Andreas K. avatar
    Andreas K.

    statt inline ‘block’

    Reply
  5. Webentwicklung avatar
    Webentwicklung

    Hi,

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

    Reply
  6. Otto avatar
    Otto

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

    Reply

Leave a Reply

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

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.)

More posts