nicht angemeldet
Klapptabelle mit JavaScript
0 
Struppi
0 0 Struppi
0 
Gunnar Bittersmann
0 
MudGuard
Klapptabelle mit JavaScript
folgende Seite/Script soll mir die Zeilen der HTML-Tabelle ein und ausblenden.
(ist die Klapptabelle eines Foren Members)
################################################################
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Klapptabelle - Version 7_1</title>
<meta name="author" content="Gernot Back">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
<!--
table td {
border:solid 1px #000000;
}
table.dyn {
width:100%;
border-collapse:collapse;
border:solid 1px #000000;
table-layout:fixed;
}
table.dyn td {
width:50%;
}
table.dyn th {
height:1.6em;
border-top:solid 1px #000000;
font-family:'Courier New', 'Courier', monospace;
}
table.dyn th.plus{
background:url(plus.gif) no-repeat .1em .1em;
}
table.dyn th.minus{
background:url(minus.gif) no-repeat .1em .1em;
}
table.dyn tr.hide {
display:none;
}
table.dyn tr.show {
display:table-row;
border:solid 1px #000000;
}
-->
</style>
<script type="text/javascript" language="JavaScript">
<!--
function toggle (grp) {
if(this.innerHTML) grp=this;
if(grp.headl.className=='plus') {
grp.headl.innerHTML = grp.txt + ' zuklappen';
grp.headl.className='minus';
} else {
grp.headl.innerHTML = grp.txt + ' aufklappen';
grp.headl.className='plus';
}
for (j=1; j<grp.lines.length ; j++ ) {
if(!grp.lines[j].className || grp.lines[j].className=='show') {
grp.lines[j].className='hide';
} else {
grp.lines[j].className='show';
}
}
}
function init () {
if(document.getElementsByTagName) {
var table = document.getElementsByTagName('table');
var last = table[table.length-1];
var groups = last.getElementsByTagName('tbody');
if(groups[0] && typeof(groups[0].className)!="undefined" && typeof(groups[0].innerHTML)!="undefined") {
for (i=0; i<groups.length; i++ ) {
groups[i].lines = groups[i].getElementsByTagName('tr');
groups[i].headl = groups[i].lines[0].getElementsByTagName('th')[0];
if(!groups[i].headl)
groups[i].headl = groups[i].lines[0].getElementsByTagName('td')[0];
groups[i].txt = groups[i].headl.innerHTML;
groups[i].headl.style.cursor = 'n-resize';
groups[i].onclick = toggle;
toggle(groups[i]);
}
}
}
}
//-->
</script>
</head>
<body>
<table class="dyn">
<tbody>
<tr>
<th colspan="2">Gruppe A</th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2">Gruppe B</th>
</tr>
<tr>
<td>Jetzt schreib ich hier mal was rein</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2">Gruppe C</th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>... und hier auch was</td>
<td style="display:none">
<script type="text/javascript">init()</script></td>
</tr>
</tbody>
</table>
<br>
<table>
<tr>
<td>Dies</td>
<td>ist</td>
<td>anders</td>
</tr>
<tr>
<td>als</td>
<td>die</td>
<td>anderen</td>
</tr>
<tr>
<td>keine</td>
<td>dynamische</td>
<td>Tabelle</td>
</tr>
</table>
<br>
<table class="dyn">
<tbody>
<tr>
<th colspan="2">Gruppe A</th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2">Gruppe B</th>
</tr>
<tr>
<td>Hier steht auch was</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2">Gruppe C</th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>... und hier etwas ganz Spannendes</td>
<td style="display:none"><script type="text/javascript">init()</script></td>
</tr>
</tbody>
</table>
</body>
</html>
#################################################################
Das tut es auch sehr gut, nur in meiner Tabelle befinden sich Eingabefelder und wenn ich in die Zeilen klicke, schließen Sie sich wieder.
Wie müsste ich den JavaScript-Code ändern, wenn die Zeilen nur beim Klick in den <th> geöffnet bzw. geschlossen werden sollen...
Sorry, die Frage hat hier in diesem Forum schon jemand gestellt, aber die Antwort hat mit nicht weitergeholfen.
Bin leider JavaScript Anfänger, würd mich aber über eine Antwort riesig freuen.
-
folgende Seite/Script soll mir die Zeilen der HTML-Tabelle ein und ausblenden.
(ist die Klapptabelle eines Foren Members)Meinst du das http://javascript.jstruebig.de/javascript/73/?
Dein Code hat wenig damit zu tun.Du weist allen Zellen einen click Event zu, was erstmal hinderlich ist für dein Vorhaben. Du könntest mit Hilfe des Eventobjektes rausfinden, ob die Zelle angeklickt wurde oder ein anderes Element und dann entsprechend reagieren.
Struppi.
-
»» folgende Seite/Script soll mir die Zeilen der HTML-Tabelle ein und ausblenden.
»» (ist die Klapptabelle eines Foren Members)Meinst du das http://javascript.jstruebig.de/javascript/73/?
Dein Code hat wenig damit zu tun.Danke für deine Antwort. Auf den Code bin ich auch schon gestoßen, hatte aber ein Problem damit. Ich will die Tabelle dynamisch befüllen. Ich habe mit dem von die vorgeschlagenen Code keinen Weg gesehen, wie ich dynamische einträge klappen kann. Dynamische Einträge in deiner vorgeschlagene Tabelle konnte ich nicht klappen.
Gruß David
-
» Meinst du das http://javascript.jstruebig.de/javascript/73/?
» Dein Code hat wenig damit zu tun.
»
Danke für deine Antwort. Auf den Code bin ich auch schon gestoßen, hatte aber ein Problem damit. Ich will die Tabelle dynamisch befüllen. Ich habe mit dem von die vorgeschlagenen Code keinen Weg gesehen, wie ich dynamische einträge klappen kann. Dynamische Einträge in deiner vorgeschlagene Tabelle konnte ich nicht klappen.Das sollte keinen Unterschied machen ob dynamisch oder nicht.
Struppi.
-
-
-
-
Hi,
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
AFAIK ist der DOCTYPE case-sensitive. Demnach hättest Du keinen.
Und warum ausgerechnet HTML 4.0 statt des üblicheren 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Siehe auch:
HTML Doctypescu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind unverschämt, werden ignoriert. Das Forum existiert.