ภาษาไทย
หลังจากเรียกใช้และเห็นผลแล้ว คุณสามารถคลิกลูกศรลงเพื่อขยายตาราง และคลิกปุ่มขึ้นเพื่อลดขนาดตาราง! หวังว่ามันจะเป็นประโยชน์กับคุณ!
<!DOCTYPE html สาธารณะ "-//W3C//DTD XHTML 1.0 การเปลี่ยนผ่าน//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" /> <title>www.downcodes.com< /title> <script language="javascript"> function tablecollapse() { /* Variables */ var allowanceClass='footcollapse'; var allowancePic=''; var expandPic=''; var InitialCollapse=true; ตาราง var t=document.getElementsByTagName('table'); var checktest= new RegExp("(^|\s)" + allowanceClass + "(\s|$)"); สำหรับ (var i = 0; i <t.length;i++) { // ถ้าตารางไม่มีคลาสที่ถูกต้อง ให้ข้ามไป if(!checktest.test(t[i].className)){continue;} // ทำให้ส่วนท้ายสามารถคลิกได้ t[i] .getElementsByTagName('tfoot')[0].onclick=function() { // วนซ้ำเนื้อหาทั้งหมดของตารางนี้แล้วแสดงหรือซ่อน // var tb=this.parentNode.getElementsByTagName('tbody'); for(var i=0;i<tb.length;i++) { tb[i].style.display=tb[i].style.display=='none'?'':'none'; } // เปลี่ยนรูปภาพตามนั้น var li=this.getElementsByTagName('img')[0]; li.src=li.src.indexOf(collapsePic)==-1?collapsePic:expandPic; } // หากเนื้อหาควรถูกยุบตั้งแต่แรก ให้ทำเช่นนั้นหาก (initialCollapse) { var tb=t[i].getElementsByTagName('tbody'); for(var j=0;j<tb.length;j++) { tb[j].style.display='none' } } // เพิ่มรูปภาพที่ล้อมรอบด้วยลิงก์จำลองเพื่ออนุญาตให้ใช้แป้นพิมพ์ // เข้าถึงเซลล์สุดท้ายในส่วนท้าย 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) } // เรียกใช้ tablecollapse เมื่อเพจโหลดหน้าต่าง .onload=tablecollapse; </script> <style type="text/css"> body{ ตระกูลแบบอักษร:Arial,Sans-Serif; f8f8f8; padding:2em; width:40em; } h1{ ตระกูลแบบอักษร:"Trebuchet MS",Sans-serif; :30em; } table.footcollapse th { text-align:uppercase; ,table.footcollapse th,table.footcollapse th { เส้นขอบ:ไม่มี; เส้นขอบยุบ:ยุบ; #69c #69c #cff; พื้นหลัง:#9cf; padding:2px 10px; } table.footcollapse tfoot td { border-style:solid; #369 #9cf; พื้นหลัง:#69c; padding:2px 10px; } table.footcollapse } table.footcollapse th { การขยาย: 2px 10px; เส้นขอบ: 1px solid # 999; เส้นขอบซ้าย: ไม่มี; } table.footcollapse tbody tr.odd { พื้นหลัง: #ccc; ด้านล่าง; padding-left:10px; float:right; } </style> </head> <body> <table summary="ซีดีที่ฉันฟังล่าสุด" class="footcollapse"> <caption>ซีดีล่าสุดของฉัน</caption > <thead> <tr> <th>ชื่อ</th> <th>ศิลปิน</th> <th>คุณภาพ</th> </tr> </thead> <tfoot> <tr> <th>ทั้งหมด< /th> <td colspan="2">5 แผ่น</td> </tr> </tfoot> <tbody> <tr> <th>ด้านหน้า 242</th> <td>ด้านหน้าต่อด้านหน้า</td> <td>ค่อนข้างโอเค</td> </tr> <tr class="odd"> <th>คุณกิตติน</th> <td>i.com</td> <td>ซื้อดี</td> < /tr> <tr> <th>Die Fantastischen Vier</th> <td>Viel</td> <td>การกลับมาที่ดี</td> </tr> <tr class="odd"> <th>Nine Inch เล็บ</th> <td>มีฟัน</td> <td>โอ้ ใช่ ในที่สุดก็มาใหม่</td> </tr> <tr> <th>ขยะ</th> <td>เลือดออกเหมือนฉัน< /td> <td>ต้องการฟังมากกว่านี้</td> </tr> </tbody> </table> <table summary="ดีวีดีที่ฉันดูล่าสุด" class="footcollapse"> <caption>ดีวีดีล่าสุดของฉัน</caption > <thead> <tr> <th>ชื่อเรื่อง</th> <th>คุณภาพ</th> </tr> </thead> <tfoot> <tr> <th>ทั้งหมด</th> <td>5 ดีวีดี </td> </tr> </tfoot> <tbody> <tr> <th>Star Trek TNG ซีซั่น 7</th> <td>พวกเขาทำมันหายไป</td> </tr> <tr class="odd "> <th>ปลาตัวใหญ่</th> <td>เรื่องราวมหัศจรรย์</td> </tr> <tr> <th>ใกล้ชิดยิ่งขึ้น</th> <td>ฉันอยากได้เวลาของฉันคืน!</td> </ tr> tr> <tr class="odd"> <th>Hot Shots</th> <td>คุ้มค่าเสมอ</td> </tr> <tr> <th>ปาร์ตี้</th> <td> น่าเสียดายที่ไม่มีผู้ขายเพิ่มแล้ว</td> </tr> </tbody> </table> </body> </html>
