nicht angemeldet
Klapptabelle
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, bin nicht so fit in JS... :o(
-
Hallo,
Wie müsste ich den JavaScript-Code ändern, wenn die Zeilen nur beim Klick in den <th> geöffnet bzw. geschlossen werden sollen...
Guck Dir mal init() an:
function init () {
if(document.getElementsByTagName) {
var table = document.getElementsByTagName('table');
var last = table[table.length-1];
var groups = last.getElementsByTagName('tbody');Da werden alle (impliziten) tbody-Elemente der letzten Tabelle in der Seite durchgegangen.
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');Für jeden tbody werden alle Tabellenzeilen genommen.
groups[i].headl = groups[i].lines[0].getElementsByTagName('th')[0];
Von der ersten Zeile wird das erste th-Element genommen.
if(!groups[i].headl)
groups[i].headl = groups[i].lines[0].getElementsByTagName('td')[0];Hier wird geprüft, ob es (nicht) existiert. Wenn dieses erste th-Element nicht existiert, wird stattdessen das erste td-Element der ersten Zeile genommen. Das ist Dein Ansatzpunkt.
Tim