fion: Tabellenteile aus-/einblenden

Beitrag lesen

Hallo,
mit Hilfe eines weiteren Forums und etwas Anpassung hab ich eine Lösung. Wen es interessiert hier meine Datei:

  
<html>  
<head>  
<script type="text/javascript">  
function table_init() {  
 var tables = document.getElementsByTagName("table");  
 for (var i=0; i<tables.length; i++) {  
  var table = tables[i];  
  if (table.id && table.id.length > 0) {  
  
   hide_tableDetails(table.id);  
  }  
 }  
}  
function hide_tableDetails(tableID) {  
 var table = document.getElementById(tableID);  
  
 for (var r = 1; r < (table.rows.length - 1); r++) {  
  table.rows[r].style.display = "none";  
 }  
  
 var links = table.getElementsByTagName("a"); // .getElementsByTagName("a")  
 link = links[links.length-1];  
 link.table_ID = table.id;  
 link.href = "javascript:show_tableDetails('" + link.table_ID + "');";  
 link.firstChild.nodeValue = "Details anzeigen"  
}  
  
function show_tableDetails(tableID) {  
 var table = document.getElementById(tableID);  
  
 for (var r = 1; r < (table.rows.length - 1); r++) {  
  table.rows[r].style.display = '';  
 }  
 var links = table.getElementsByTagName("a"); // .getElementsByTagName("a")  
 link = links[links.length-1];  
 link.table_ID = table.id;  
 link.href = "javascript:hide_tableDetails('" + link.table_ID + "');";  
 link.firstChild.nodeValue = "Details verbergen"  
}  
</script>  
</head>  
<body onload="table_init();">  
<a name="top">Hier ist oben</a>  
<table style="background-color:#eeeeee; margin:auto auto; border: 1px dashed #000;" cellpadding="10">  
<tr><td>  
  
<table border="1" id="table1">  
<tr>  
 <td>text1 basdfasdf <br> asdfasdf <a href="http://www.google.com/">ein link</a> asdfasdf </td>  
</tr>  
<tr>  
 <td>details1</td>  
</tr>  
<tr>  
 <td>zeile3_1</td>  
</tr>  
<tr>  
 <td><a href="#top">nach oben</a></td>  
</tr>  
</table>  
  
<table border="1" id="table2">  
<tr>  
 <td>text2</td>  
</tr>  
<tr>  
 <td>details2</td>  
</tr>  
<tr>  
 <td>zeile3_2</td>  
</tr>  
<tr>  
 <td><a href="#top">nach oben</a></td>  
</tr>  
</table>  
  
<table border="1" id="table3">  
<tr>  
 <td>text3</td>  
</tr>  
<tr>  
 <td>details3</td>  
</tr>  
<tr>  
 <td>zeile3_3</td>  
</tr>  
<tr>  
 <td><a href="#top">nach oben</a></td>  
</tr>  
</table>  
  
<table border="1">  
<tr>  
 <td>Die bleibt unber&uuml;hrt</td>  
</tr>  
<tr>  
 <td>zeile4_2</td>  
</tr>  
<tr>  
 <td>zeile4_3</td>  
</tr>  
<tr>  
 <td><a href="#top">nach oben</a></td>  
</tr>  
</table>  
  
</td></tr></table>  
  
</body>  
</html>  

Danke an alle, die fleißig mit geholfen haben :-).
fion