Dölja <tr>

Hej

Jag skriver ut en lång tabell i HTML och jag vill dela upp den lite, jag skulle vilja dölja en del av alla tabellrader..

Trodde det gick med
<div style="visibility: hidden">
<tr><td></td></tr>
<tr><td></td></tr>
</div>

detta verkar inte funka och inte heller om jag lägger visibility: hidden i tr taggen, då tar den fortfarande uppp utrymmet men den syns inte...

Finns det något annat sätt attlösa det på?

mvh

helt rätt att visibility: hidden gör att elementet tar upp den plats det skulle tagit upp
testa istället med display:none

Mja... som rhdf skriver, så är det display:none om du nu väljer att använda css.
Men du kan ju inte klämma in en div mitt inne i en tabell utan ska lägga in stilen i varje tr-tag du vill göra osynlig.

Jag skulle nog bara kommentera bort de rows jag inte ville visa istället, typ så här

<table>
<tr></tr>
<tr></tr>
<!--<tr></tr>-->
<tr></tr>
<!--<tr></tr>-->
<tr></tr>
</table>

a min tanke är att jag lägger en rad med en rubrik och ett plustecken så man kan expandera de dolda raderna och visa dom om man måste se just dom..

typ
<tr><td colspan="2">VIsa dolda <a href="">+</A></td></tr>
<div style="visibility: hidden" name="id22">
<tr><td></td></tr>
<tr><td></td></tr>
</div>

eller är det feltänk?

en div kan inte vara inne i en <table> och jag tycker det känns helt fel att använda tabeller på det sättet (använd tabeller där tabeller skall presentera tabell-data, vilket "visa och dölj" inte riktigt är i mina ögon.

kan hålla med om att det inte känns riktig alls att placera den så..
men om jag använder mig av display:none i <tr> taggen då?
Tabell känns ändå rätt till den data det är, saken är den att tabellen kanske blir lite stor och oöverskådlig, så det hade varit ett snyggt altetrnativ att inte alla rader visas utan istället en rubrik bara som går att klicka på för att expandera resten om så är nödvändigt..

"Visa alla/Visa/dölj" är verkligen inte tabell-data, men problemet är vilka tr skall du dölja? Det måste vara fler än en väl?

japp, det är en hel grupp med rader.. Det listas en gäng ordrar med kanske 50 orderrader, dessa 50 är uppdelade i olika produktgrupper.. så listan består av ett gäng ordrar med olka produkt grupper... Här ska det gå snabbt och enkelt för användaren att bläddra mellan ordrarna och kolla de olika produktgrupperna..

hur är det nu, kan man inte ha flera <tbody> i en tabell?
i så fall skulle du ju kunna gruppera de rader du vill ha på det viset

Du menar att du vill ha något som filterar exempelvis allt som inte har värdet "spel" i tabellen, sortera om tabellen, utan att behöva uppdatera sidan?

Detta kan lösas med Javascript/jQuery, här är två artiklar som hjälper dig på traven.
http://net.tutsplus.com/tutorials/javascript-ajax/using-jquery-to-manipulate-and-filter-data/
http://www.javascriptf1.com/tutorial/javascript-hide-table-row.html?page=3

nja, det kunde vara en modell, men jag skriver ut allt från databsen som finns inom ett visst antal grupper..
Jag gjorde så att jag använde mig av <tobdy>
typ så här
<tr><td colspan="2"><a href="showtBody("12")">Lösa detaljer</a></td></tr>
<tobdy style="display:none" id="12">
<tr><td>blaha blha</td><td>blaha blaha</td></tr>
<tr><td>blaha blha</td><td>blaha blaha</td></tr>
<tr><td>blaha blha</td><td>blaha blaha</td></tr>
</tbody>

jag provade använda jQuery med toggle men fick inte det att funka..
Har gjort precis som i ditt första exempel..

Ett ID får ALDRIG börja med ett tal!

Sen vet jag inte hur du har i resten av din HTML tabell men: http://jsbin.com/usanin/edit

Du behöver inte ha ID alls om du vet hur din HTML kod renderas ut.

:)
Okey, det var ett dåligt exempel av mig.. Id'et heter något i stil med "tbody12"
Den här lilla prylen med "closest" var ju skitsmart ..

Jag gjorde en javascript funktion som visar det dolda lagret och samtidigt byter länktexten samt länkreferensen..
Ditt exempel blir ju skitsmidigt.. Enda detaljen kvar då är ju hur jag byter ut innehållet i den klickbara <tr> 'en? Nu har jag ju använt innerHtml..
Jag har nämligen en bild på ett "plus" tecken som ändras till ett "minus" tecken efter man expanderat.

du bygger ju bara ut den lilla metod jag har gjort... kolla bara om den är öppen eller inte, eller så byter du CSS-klass när du togglar... finns många lösningar för det.

http://jsbin.com/usanin/3/edit

visar bara med text ... feel free to change.

stort tack för hjälpen, kör på det, minimierar och förenklar koden avsevärt..