javascript: Tabelle auf klick ein oder ausblenden

[ActionNews]

Hallo,

Ich bin noch recht neu was javascript anbelangt, aber ich fand die Möglichkeiten die js bietet ganz interessant. Habe z.b. gesehen, dass sich Tabellen so ein und ausblenden lassen, aber so ganz funktioniert das bei mir wohl nicht. Habe mal folgendes Probiert:

<script language="javascript">

function show(id)
{
if (document.getElementById(id).style.display == "block")
{ document.getElementById(id).style.display = "none"; }
else
{ document.getElementById(id).style.display = "block"; }
}

document.write("<table>");
document.write("<tr><td >blablubb</td><td>test</td><td>noch mehr text</td><td>Wert</td></tr>");
document.write("<tr onclick='show(\'info\')'>");
document.write("<td class='grey'><b>eine Zeile</b></td>");
document.write("<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>");
document.write("<tr><td colspan='4'>");
document.write("<table id='info' style='DISPLAY:none' border='0' cellspacing='1' style='border-collapse: collapse;' width='100%'>");
document.write("<tr><td>>Ganz viel Information</td></tr>");
document.write("</table></table>");
</script>

Sinn und Zweck soll es sein später mal eine Tabelle zu haben in der grobe informationen stehen und ich dann per klick in eine Zeile genauere informationen direkt unter der Zeile anzeigen kann. Nur leider funktioniert das nicht :(. Hat wer nen Rat?

CU Michael

[ActionNews]

Ok hat sich erledigt. Habs etwas umgeschrieben so funktionierts:

<script language="javascript">
function showhide(id){
var mehrInfo=document.getElementById(id);
if (mehrInfo!=null) mehrInfo.style.display = (mehrInfo.style.display=='none') ? "block" :"none";
}
</script>

<table><tr onclick="javascript:showhide('test');"><td>Details ein/ausblenden</td></tr>
<tr><table>
<tr>
<td id="test" style="display: none;">Testtext</td>
</tr>
</table></tr></table>

CU Michael

[ActionNews]

Hmm doch noch ein Problem :

Ich will die Tabelle per javascript erstellen und dazu muss ich das ganze in einer schleife mit document.wrtie ausgeben. Aber da funktioniert es leider nicht :(. Wiess jemand woran das liegt?

CU Michael

[Sephiroth]

Hmm doch noch ein Problem :

Ich will die Tabelle per javascript erstellen und dazu muss ich das ganze in einer schleife mit document.wrtie ausgeben. Aber da funktioniert es leider nicht :(. Wiess jemand woran das liegt?

CU Michael
Wann willst du die erstellen? Nachträglich, wenn bereits die Seite erstellt ist? Dann kannst du write() vergessen und du solltest dir dann z.B. ein DIV als Container für die Tabelle anlegen, welches leer ist und dann mittels innerHTML die Tabelle einfügen.
function createTable() {
container = document.getElemenyById('tableContainer');
container.innerHTML = 'jetz kommt dein HTML Code der Tabelle etc. pp';
}
function createTable() {
container = document.getElemenyById('tableContainer');
container.innerHTML = '<table><tr><td>Details ein/ausblenden</td></tr> \
<tr><table> \
<tr> \
<td>Testtext</td> \
</tr> \
</table></tr></table>';
}


übrigens: bei den Events kommt nicht extra noch javascript: vor den JS-Code.
also: onclick="showhide('test');"

[ActionNews]

Also mein Problem ist folgendes:

Ich habe ein großes zweidimensionales Array in dem Daten stehen. Mit diesen Daten will ich beim laden des Dokuments die Tabelle erstellen. Das ganze sieht im Moment so aus:

<script language="javascript">

x=1;
document.write("<table>");
document.write("<tr><td class='table2' style='background-color:#5B0B0B' align='center'>Passive RAs</td>");
document.write("<td class='table2' style='background-color:#5B0B0B' align='center'>L1</td>");
document.write("<td class='table2' style='background-color:#5B0B0B' align='center'>L2</td>");
document.write("<td class='table2' style='background-color:#5B0B0B' align='center'>L3</td>");
document.write("<td class='table2' style='background-color:#5B0B0B' align='center'>L4</td>");
document.write("<td class='table2' style='background-color:#5B0B0B' align='center'>L5</td>");
document.write("<td class='table2' style='background-color:#5B0B0B' align='center'>Level</td>");
document.write("<td class='table2' style='background-color:#5B0B0B' align='center'>Wert</td>");
document.write("</tr>");

moo = arrClass[classID].arrList.length - 1;
while (x<=moo) {
raID = arrClass[classID].arrList[x];
document.write("<tr>"); /* Hier müsste ein onclickereignis rein, dass showhide() mit der entsprechenden ID der info-Tabelle aufruft: also "info"+raID */
document.write("<td class='grey'><b>"+arrData[raID].name+"</b></td>");
count=1;
while (count<=5) {
if (arrData[raID].cost[count]==0) {document.write("<td align='right' width='20'>-</td>");}
else {
check=override(classID,raID);
if (check==0) {document.write("<td align='right' width='20'>"+arrData[raID].cost[count]+"</td>");}
else {document.write("<td align='right' width='20'>"+check+"</td>");}
}
count=count+1;
}

document.write("<td>&nbsp;</td><td>&nbsp;</td>");
document.write("</tr>");

/* nicht sichtbare Tabelle */

document.write("<tr><td bgcolor='#000000' colspan='8'>");
document.write("<table id='info"+raID+"' style='DISPLAY:none' border='0' cellspacing='1' style='border-collapse: collapse; font-family:Verdana; font-size:8pt' width='100%'>");
document.write("<tr><td><img border='0' src='modules/ra_planer/image/"+raID+".gif' align='left' width='32' height='32'><b>Info: </b>"+arrData[raID].description+"<br>&nbsp;</td></tr>");
window.alert(document.getElementById("info"+raID).id);
document.write("</table>");

x=x+1;
}
document.write("</table>")

</skript>

Wie bekomme ichs nun hin, dass bei einem Klick auf die Tabellenzeile die ensprechende eingebettete Info-Tabelle angezeigt wird?

Ach Ja das Array arrData wird weiter oben gefüllt aber hat jetzt nix mit dem eigentlichen Problem zu tun.

CU Michael

[Sephiroth]

document.write("<tr>"); /* Hier müsste ein onclickereignis rein, dass showhide() mit der entsprechenden ID der info-Tabelle aufruft: also "info"+raID */
das hast du doch weiter unten schon angewendet
und sähe dann z.B. so aus
document.write("<tr onclick=\"showhide('info"+raID+"');\">");

[ActionNews]

Ah ok ... man merkt ich fange erst mit javascript an denn ich hatte es folgendermaßen versucht:

document.write("<tr onclick='showhide(\'info"+raID+"\');'>");

Bin praktisch an der setzung der richtigen " und ' gescheitert :D.
Danke für deine Hilfe.

CU Michael

[Sephiroth]

Du hättest beim showhide nicht erneut die single-quotes verwenden dürfen, da du sie bereits beim onclick verwendest.