Juergen: Tabellenzeile spaltenübergreifend verbinden innerhalb Toogle-Slo

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

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

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

  2. Om nah hoo pez nyeetz, Juergen!

    Mach erstmal eine vernünftige Tabelle ohne

    • border, cellspacin, cellpadding, bgcolor: dafür gibts CSS
    • font: dafür gibts CSS (möglicherweise sollen es th sein?)
    • b: dafür gibts CSS (möglicherweise sollen es th sein?)
    • br: dafür gibts CSS
    • class="even": dafür gibts CSS (nth-child)

    -> siehe http://wiki.selfhtml.org

    Spalten werden mit colspan verbunden.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Kai  und Kaiman.