Deutsch
Nachdem Sie ausgeführt haben und den Effekt gesehen haben, können Sie auf den Abwärtspfeil klicken, um die Tabelle zu erweitern, und auf die Aufwärtsschaltfläche klicken, um die Tabelle zu verkleinern! Ich hoffe, es ist nützlich für Sie!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; /> <title>www.downcodes.com< /title> <script language="javascript"> function tablecollapse() { /* Variables */ var collapsePic=''; var initialCollapse=true; tables var t=document.getElementsByTagName('table'); var checktest= new RegExp("(^|\s)" + collapsClass + "(\s|$)"); <t.length;i++) { // Wenn die Tabelle nicht die richtige Klasse hat, überspringe sie if(!checktest.test(t[i].className)){continue;} // Fußzeile anklickbar machen t[i] .getElementsByTagName('tfoot')[0].onclick=function() { // Durchlaufe alle Körper dieser Tabelle und zeige oder verstecke sie // var tb=this.parentNode.getElementsByTagName('tbody'); for(var i=0;i<tb.length;i++) { tb[i].style.display=tb[i].style.display=='none'?'':'none' } // das Bild entsprechend ändern var li=this.getElementsByTagName('img')[0]; li.src=li.src.indexOf(collapsePic)==-1?collapsePic:expandPic; } // wenn die Körper zunächst reduziert werden sollen, wenn (initialCollapse) { var tb=t[i].getElementsByTagName('tbody'); for(var j=0;j<tb.length;j++) { tb[j].style.display='none'; // Fügen Sie das von einem Dummy-Link umgebene Bild hinzu, um // den Zugriff auf die letzte Zelle in der Fußzeile zu ermöglichen var newa=document.createElement('a'); newa.onclick=function() {return false;} var newimg=document.createElement('img'); newimg.src=initialCollapse?expandPic:collapsePic; var tf=t[i].getElementsByTagName('tfoot')[0]; getElementsByTagName('td')[tf.getElementsByTagName('td').length-1]; newa.appendChild(newimg); lt.insertBefore(newa,lt.firstChild); // tablecollapse ausführen, wenn die Seite geladen wird .onload=tablecollapse; </script> <style type="text/css"> body{ font-family:Arial,Sans-Serif; background:#cc9; f8f8f8; padding:2em; width:40em; :30em; } table.footcollapse caption{ font-size:120%; text-align:left; padding:.5em } table.footcollapse; ,table.footcollapse th,table.footcollapse th { border:none; border-collapse } table.footcollapse thead { border-style:solid; border-color:#cff #69c #69c #cff; padding:2px 10px; } table.footcollapse tfoot td { border-style:solid; border-color:#9cf; #369 #9cf; padding:2px 10px; } table.footcollapse tbody{ background:#ddd; td{ padding:1px solid #999; } th{ padding:2px 10px; border:none; } table.footcollapse tbody tr.odd{ background:#ccc; unten; padding-left:10px; float:right; } </style> </head> <body> <table summary="CDs, die ich kürzlich gehört habe" class="footcollapse"> <caption>Meine letzten CDs</caption > <thead> <tr> <th>Titel</th> <th>Künstler</th> <th>Qualität</th> </tr> </thead> <tfoot> <tr> <th>Gesamt< /th> <td colspan="2">5 CDs</td> </tr> </tfoot> <tbody> <tr> <th>Front 242</th> <td>Front By Front</td> <td>Ganz OK</td> </tr> <tr class="odd"> <th>Miss Kittin</th> <td>i.com</td> <td>guter Kauf</td> < /tr> <tr> <th>Die Fantastischen Vier</th> <td>Viel</td> <td>Schönes Comeback</td> </tr> <tr class="odd"> <th>Nine Inch Nägel</th> <td>Mit Zähnen</td> <td>Oh ja, endlich ein neues</td> </tr> <tr> <th>Müll</th> <td>Bleed like me< /td> <td>Muss mehr gehört werden</td> </tr> </tbody> </table> <table summary="DVDs, die ich kürzlich gesehen habe" class="footcollapse"> <caption>Meine letzten DVDs</caption > <thead> <tr> <th>Titel</th> <th>Qualität</th> </tr> </thead> <tfoot> <tr> <th>Gesamt</th> <td>5 DVDs </td> </tr> </tfoot> <tbody> <tr> <th>Star Trek TNG Staffel 7</th> <td>Sie haben es verloren</td> </tr> <tr class="odd "> <th>Big Fish</th> <td>Wonderful Tale</td> </tr> <tr> <th>Closer</th> <td>Ich will meine Zeit zurück!</td> </ tr> tr> <tr class="odd"> <th>Hot Shots</th> <td>Es lohnt sich immer</td> </tr> <tr> <th>Die Party</th> <td> Schade, dass es nicht mehr Verkäufer gibt</td> </tr> </tbody> </table> </body> </html>
