Tabellenzeile spaltenübergreifend verbinden innerhalb Toogle-Slo
Juergen
- html
0 Gast0 jugiii
0 Matthias Apsel
Hallo zusammen,
ich habe schon sämtliche Varianten durch und krieg es einfach nicht hin, dass ich in der Tabelle den Inhalt aus "beschreibender Text" spaltenübergreifend mit colspan einsetze, damit dieser Text über die anderen Spalten hinausgeht und diese halt ersetzt und nicht anzeigt, genau wie in <http://de.selfhtml.org/html/tabellen/anzeige/colspan.htm@title=diesem Beispiel>
Der Toogle - Slidedown/up Effekt muss natürlich bestehen bleiben..
Hat jemand von euch einen Vorschlag, ohne das Script großartig umschreiben zu müssen?
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready( function() {
$('.trigger').not('.trigger_active').next('.toggle_container').hide();
$('.trigger').click( function() {
var trig = $(this);
if ( trig.hasClass('trigger_active') ) {
trig.next('.toggle_container').slideToggle('slow');
trig.removeClass('trigger_active');
} else {
$('.trigger_active').next('.toggle_container').slideToggle('slow');
$('.trigger_active').removeClass('trigger_active');
trig.next('.toggle_container').slideToggle('slow');
trig.addClass('trigger_active');
};
return false;
});
});
</script>
</head>
<body>
<table border="1" cellspacing="2" cellpadding="0">
<tr>
<td bgcolor="#009394"><font color="#e9e9e9"><b>Spalte<br>
<br>
</b></font></td>
<td bgcolor="#009394"><font color="#e9e9e9"><b>Spalte<br>
<br>
</b></font></td>
<td bgcolor="#009394"><font color="#e9e9e9"><b>Spalte</b></font></td>
<td bgcolor="#009394"><font color="#e9e9e9"><b>Spalte</b></font></td>
<td bgcolor="#009394"><font color="#e9e9e9"><b>Spalte</b></font></td>
</tr>
<tr class="even">
<td>BBWL01</td>
<td><h3 class="trigger">Probetext</h3>
<div class="toggle_container">
<p>beschreibender Text</p>
</td>
<td>Spalteninhalt</td>
<td>Spalteninhalt</td>
<td>Spalteninhalt</td>
</tr>
die css datei habe ich jetzt mal rausgelassen
Hallo,
<tr class="even">
<td>BBWL01</td>
<td><h3 class="trigger">Probetext</h3>
<div class="toggle_container">
<p>beschreibender Text</p>
</td>
<td>Spalteninhalt</td>
<td>Spalteninhalt</td>
<td>Spalteninhalt</td>
</tr>
Ist das die Zeile?
Ein Datenfeld kann über zwei (oder mehrere) Spalten gehen:
<td colspan=2>
<h3 class="trigger">Probetext</h3>
...
</td>
Dann muss aber in dieser Zeile danach eine Spalte weniger angegeben werden, also nur noch zwei statt drei
<td>Spalteninhalt</td>
<td>Spalteninhalt</td>
Gast
Hallo,
<tr class="even">
<td>BBWL01</td>
<td><h3 class="trigger">Probetext</h3>
<div class="toggle_container">
<p>beschreibender Text</p>
</td>
<td>Spalteninhalt</td>
<td>Spalteninhalt</td>
<td>Spalteninhalt</td>
</tr>Ist das die Zeile?
Ein Datenfeld kann über zwei (oder mehrere) Spalten gehen:
<td colspan=2>
<h3 class="trigger">Probetext</h3>
...
</td>Dann muss aber in dieser Zeile danach eine Spalte weniger angegeben werden, also nur noch zwei statt drei
<td>Spalteninhalt</td>
<td>Spalteninhalt</td>Gast
Hi,
irgendwie scheint es nicht zu gehen. Ich dachte, es wäre einfach möglich, unterhalb des Toogle-Befehls einfach eine neue Zeile der Tabelle einzufügen, welche dann mit den Folgeinhalten befüllt wird und sich somit ein- und ausblenden lässt. Dann muss das Ganze doch wohl neu aufgesetzt werden.
Om nah hoo pez nyeetz, Juergen!
Mach erstmal eine vernünftige Tabelle ohne
-> siehe http://wiki.selfhtml.org
Spalten werden mit colspan verbunden.
Matthias