✔ display:none/block ignoriert rowspan-Wert

M

Moritz123

Erfahrenes Mitglied
Hallo,

ich habe hier eine Tabelle mit Daten, für die bei Bedarf Details angezeigt werden können. Zu diesem Zweck erzeuge ich pro Datensatz zwei Reihen, wovon eine sieben Zellen mit den
"Übersichtswerten" enthält und die andere die Details beinhalten soll.
Um die zweite Zeile einzublenden, bediene ich mich der jQuery-Funktion slideToggle(), die die mittels display:none ein- bzw. ausblenden soll.
Leider ist es so, dass sobald das CSS-Attribut display ins Spiel kommt, die Eigenschaft rowspan="7" der einzelnen Zelle ignoriert wird und die Zelle nur noch über eine statt über alle sieben läuft.
gibt es hier eine Alternative oder einen Hack, mit dem sich das bewerkstelligen lässt?

Vielen Dank und schöne Grüße,

Moritz
 
Moin Moritz,

das Problem lässt sich meist umgehen, indem man die display-Eigenschaft nicht auf "block" setzt, sondern sie ganz entfernt, oder ihr bspw. einen leeren String zuweist.

Ursache: Eine <tr> ist kein Blockelement, per display:block wird es aber als solches dargestellt. Blockelemente wiederum haben keinen rowspan oder dergleichen :)

Wenn du das display einfach entfernst, wir die <tr> als das dargestellt, was sie ist....eine <tr> :suspekt:

Das korrekte Attribut wäre css-seitig zwar display:table-row , um aber auch zu älteren Browsern kompatibel zu bleiben, nutze besser die zuerst genannte Variante.
 
Hallo Sven,

vielen Dank für deine Antwort.
Das Problem bei der Sache ist, dass die Zeile per Default ja ausgeblendet sein soll. Ich habe mittlerweile über Firebug herausgefunden, dass folgendes passiert:

Fall 1) kein Display-Attribut:
=========
- Zeile wird initial angezeigt
- slideToggle setzt es zunächst auf display: none >> Zeile wird ausgeblendet
- bei erneutem klicken setzt jQuery das Attriibut display: table-row >> Zeile wird über alle Zellen laufend dargestellt

Fall 2) Display-Attribut ist none
========
- Zeile wird nicht eingeblendet
- slideToggle setzt display auf block >> Zeile wird nur über erste Spalte laufend dargestellt
- bei erneutem Klick setzt jQuery das Attribut display: none

Nun ist die Frage, wie schaffe ich es die Zelle initial auszublenden, so dass jQuery anschließend display: table-row setzt?
 
Hier eine Möglichkeit:

Code: 
<table>
<tr onclick="fx()"><td>klick</td><td>klack</td></tr>
<tbody style="display:none"><tr><td rowspan="2">1</td><td>2</td></tr></tbody>
<tr><td>3</td></tr>
</table>
<script type="text/javascript">
function fx()
{
  if($('tr:eq(1)').parent().is(':hidden'))
  {
    $('tr:eq(1)').hide().parent().show();
  }
  $('tr:eq(1)').slideToggle();
}
</script>
Die zu slidende <tr> befindet sich in einem <tbody>, und eingangs ist nur jener per CSS versteckt(die <tr> ist natürlich auch nicht zu sehen, weil sie im <tbody> steckt)

Beim 1. slideToggle() wird geschaut, ob der <tbody> versteckt ist. Wenn ja, wird die <tr> per hide() versteckt(table-row wird von jquery intern gespeichert)...und der <tbody> angezeigt(ist jetzt natürlich nicht zu sehen, weil er keinen sichtbaren Inhalt hat)
 
Ok, danke dir. Das ist auf jeden Fall auch eine Möglichkeit - ich habe es jetzt so gemacht, dass nach laden der Seite mittels
Code: 
$('tr[id*="tr-details"]').hide();
alle entsprechenden <tr>s ausgeblendet werden. Damit klappt es auch und scheint mir gar nicht so weit von deiner Lösung entfernt.

Vielen Dank nochmals!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück