nicht angemeldet
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.
Struppi
Gunnar Bittersmann
MudGuard