Indonesia
Setelah menjalankan dan melihat efeknya, Anda dapat mengklik panah bawah untuk memperluas tabel, dan klik tombol atas untuk memperkecil tabel! Semoga bermanfaat bagi Anda!
<!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; charset=gb2312" /> <judul>www.downcodes.com< /judul> <script bahasa="javascript"> fungsi tablecollapse() { /* Variabel */ var collapsClass='footcollapse'; var collapsPic=''; var expandPic=''; tabel var t=document.getElementsByTagName('table'); var checktest= new RegExp("(^|\s)" + collumClass + "(\s|$)"); <t.length;i++) { // jika tabel tidak memiliki kelas yang tepat, lewati saja if(!checktest.test(t[i].className)){continue;} // buat footer dapat diklik t[i] .getElementsByTagName('tfoot')[0].onclick=function() { // ulangi seluruh isi tabel ini dan tampilkan atau sembunyikan // var tb=this.parentNode.getElementsByTagName('tbody'); i=0;i<tb.length;i++) { tb[i].style.display=tb[i].style.display=='none'?'':'none' } // ubah gambarnya sesuai kebutuhan var li=this.getElementsByTagName('img')[0]; li.src=li.src.indexOf(collapsePic)==-1?collapsePic:expandPic } // jika isi harus diciutkan terlebih dahulu, lakukan jika (initialCollapse) { var tb=t[i].getElementsByTagName('tbody'); for(var j=0;j<tb.length;j++) { tb[j].style.display='none'; // tambahkan gambar yang dikelilingi oleh tautan tiruan untuk mengizinkan keyboard // akses ke sel terakhir di footer var newa=document.createElement('a'); newa.href='#'; {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); .onload=tablecollapse; </script> <style type="text/css"> isi{ font-family:Arial,Sans-Serif; ukuran font:90%; latar belakang:#cc9; f8f8f8; padding:2em; lebar:40em; } h1{ font-family:"Trebuchet MS",Sans-serif; transformasi teks: huruf besar warna:#696; :30em; } tabel.footcollapse keterangan{ ukuran font:120%; transformasi teks: huruf besar; perataan teks:kiri; padding:.5em 1em; } tabel.footcollapse th{ perataan teks:kiri; ,table.footcollapse th,table.footcollapse th { border:none; border-collapse:collapse; } table.footcollapse thead th { lebar:10em; gaya batas: lebar batas:1px; #69c #69c #cff; latar belakang:#9cf; padding:2px 10px; } table.footcollapse tfoot th, table.footcollapse tfoot td { gaya batas: lebar batas:1px; #369 #9cf; latar belakang:#69c; padding:2px 10px; } tabel.footcollapse badan{ latar belakang:#ddd; } tabel.footcollapse badan td{ padding:5px 10px; th{ padding:2px 10px; border:1px solid #999; border-left:none; } table.footcollapse tbody tr.odd{ latar belakang:#ccc } table.footcollapse tfoot td img{ border:none; bottom; padding-left:10px; float:right; } </style> </head> <body> <table summary="CD yang saya dengarkan baru-baru ini" class="footcollapse"> <caption>CD terbaru saya</caption > <thead> <tr> <th>Judul</th> <th>Artis</th> <th>Kualitas</th> </tr> </thead> <tfoot> <tr> <th>Total< /th> <td colspan="2">5 CD</td> </tr> </tfoot> <tbody> <tr> <th>Depan 242</th> <td>Depan Demi Depan</td> <td>Cukup oke</td> </tr> <tr class="odd"> <th>Nona Kittin</th> <td>i.com</td> <td>pembelian bagus</td> < /tr> <tr> <th>Die Fantastischen Vier</th> <td>Viel</td> <td>Kembalinya yang bagus</td> </tr> <tr class="odd"> <th>Sembilan Inci Kuku</th> <td>Dengan Gigi</td> <td>Oh ya, akhirnya yang baru</td> </tr> <tr> <th>Sampah</th> <td>Berdarah seperti saya< /td> <td>Perlu didengarkan lebih banyak</td> </tr> </tbody> </table> <table ringkasan="DVD yang saya tonton baru-baru ini" class="footcollapse"> <caption>DVD terbaru saya</caption > <thead> <tr> <th>Judul</th> <th>Kualitas</th> </tr> </thead> <tfoot> <tr> <th>Total</th> <td>5 DVD </td> </tr> </tfoot> <tbody> <tr> <th>Star Trek TNG Musim 7</th> <td>Mereka kalah</td> </tr> <tr class="odd "> <th>Ikan Besar</th> <td>Kisah Indah</td> </tr> <tr> <th>Lebih Dekat</th> <td>Aku ingin waktuku kembali!</td> </ tr> tr> <tr class="odd"> <th>Foto Menarik</th> <td>Selalu berharga</td> </tr> <tr> <th>Pesta</th> <td> Sayang sekali tidak ada lagi Penjual</td> </tr> </tbody> </table> </body> </html>
