Tabellezeilen bei Click anzeigen

[Ailene]

hallo.

ich versuche gerade eine Aufgabe meines Chefs zu lösen und komme nicht weiter. Ich denke ich bin auf Java angewiesen. Habe aber leider gar keine Ahnung davon.

ich habe eine Tabelle :

<table border="1" width="100%">
  <tr>
    <td>BEISPIELTEXT</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Ich möchte gern erreichen, dass wenn ich auf den "BEISPIELTEXT" klicke, zusätzliche Zeilen der Tabelle angezeigt werden. Dabei ist es egal, ob der "BEISPIELTEXT" ein bild, link oder sonstwas ist. die werte in den Zellen, die angezeigt werden, sind nicht dynamisch sondern stehen schon vorher fest. wie kann ich das machen..
Ich brauch die Funktion onklick()gell ?? aber wie gehts weiter?

liebe grüße

ailiene

[wahsaga]

hi,

Ich denke ich bin auf Java angewiesen.

Nein, Javascript löst solche Aufgaben wesentlich besser.

Ich brauch die Funktion onklick()gell ??

onClick ist keine Funktion, sondern ein Eriegnis, ein Event - auf das du dann beispielsweise mit dem Aufruf einer Javascript-Funktion reagieren kannst.

aber wie gehts weiter?

Du möchtest CSS-Eigenschaften von Elementen manipulieren - also beschäftige dich zunächst mit dem style-Objekt von Javascript.

gruß,
wahsaga

[Ailiene]

Danke.. ich habe mir das mal angeschaut und eine lösung gefunden.
der blendet mir so viele zeilen aus wie ich will :)

danke für die HILFE!!
gruß Ailiene

function Visible(StartID,EndID)
{
  for (i=StartID; i<=EndID;i++)
    {
    if (document.getElementById(i).style.display=="none")
 {
 document.getElementById(i).style.display="inline";
 }
    else
        {
 document.getElementById(i).style.display="none";
 }
    }
}

<table border="1" width="100%">
  <tr>
    <td onClick="Visible(1,2)"><b>01.01.2006</b></td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
  </tr>
  <tr ID="1" STYLE="display:inline;">
    <td>12:00 UHR</td>
    <td>Franziska</td>
    <td>Olpans</td>
  </tr>
  <tr ID="2" STYLE="display:inline;">
    <td>15:00 UHR</td>
    <td>Klaus</td>
    <td>Ruphert</td>
  </tr>
</table>

[Cybaer]

Hi,

Danke.. ich habe mir das mal angeschaut und eine lösung gefunden.
der blendet mir so viele zeilen aus wie ich will :)

Ne, ne, es gibt noch andere Browser als den IE! =;-)

document.getElementById(i).style.display="inline";

Eine Tabellenzelle hat offiziell "table-cell". Nur der IE murkst mit "inline" rum. Besser "" nehmen, für den Standardwert (s. auch Coding: Darstellungswechsel - Un-/Sichtbare Elemente: Ein-/Ausklappen, Verstecken, Transparenz, Farbe)

Gruß, Cybaer

[MudGuard]

Hi,

for (i=StartID; i<=EndID;i++)
    {
    if (document.getElementById(i).style.display=="none")

Das darf eigentlich gar nicht funktionieren.
id-Werte dürfen keine Zahlen sein.

document.getElementById(i).style.display="inline";

Daß das Unsinn ist, hat Cybaer ja schon gesagt.

cu,
Andreas

[Hans]

Hi Ailiene,

...
<TR><TD onClick="mach_mal()">Beispieltext</TD></TR>
<TR><TD ID="A1" STYLE="visibility:hidden;">Guck mal hier</TD></TR>
...
<SCRIPT>
function mach_mal() {
   document.getElementById("A1").style.visibility="visible";
}
</SCRIPT>

Zuerst sind die zusaetlichen Zeilen "versteckt". Wenn Du auf den Beispieltext klickst, dann wird das Style-Attribut von "hidden" auf "visible" gesetzt.

Gruß

Hans

PS:Die Schleife fuer alle weiteren Tabellenzeilen wirst Du ja bestimmt hinbekommen, oder ?

[Ailiene]

DANKE!!! ich versuch das mal mit der schleife. vielleicht bekommm ich das hin. :)
liebe grüße

ailiene

[at]

Hallo.

DANKE!!! ich versuch das mal mit der schleife.

Versuche es besser nicht mit einer Schleife, sondern mit der vorgeschlagenen Lösung.
MfG, at