العربية
بعد التشغيل ورؤية التأثير، يمكنك النقر فوق السهم لأسفل لتوسيع الجدول، والنقر فوق الزر العلوي لتصغير الجدول! نأمل أن يكون مفيدا لك!
<!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" /> <title>www.downcodes.com< /title> <script language="javascript"> function tablecollapse() { /* المتغيرات */ varlapseClass='footcollapse'; varlapsePic=''; الجداول var t=document.getElementsByTagName('table'); var checktest= new RegExp("(^|\s)" +lapseClass + "(\s|$)"); <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; } // إذا كان يجب طي الأجسام في البداية، فافعل ذلك if (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='#'; 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 عند تحميل الصفحة .onload=tablecollapse; </script> <style type="text/css"> body{font-family:Arial,Sans-Serif; f8f8f8; :30em } table.footcollapse caption{font-size:120%;text-align:left; ,table.footcollapse th,table.footcollapse th { border-collapse:collapse; } table.footcollapse th { width:10em; border-width:1px; #69c #69c #cff; الخلفية:#9cf; #369 #9cf; الخلفية:#69c; th{ padding:2px 10px; border:1px Solid #999; border-left:none; أسفل؛ > <thead> <tr> <th>اللقب</th> <th>الفنان</th> <th>الجودة</th> </tr> </thead> <tfoot> <tr> <th>الإجمالي< /th> <td colspan="2">5 أقراص مضغوطة</td> </tr> </tfoot> <tbody> <tr> <th>Front 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>تسعة بوصات أظافر</th> <td>مع أسنان</td> <td>أوه نعم، أخيرًا واحدة جديدة</td> </tr> <tr> <th>قمامة</th> <td>تنزف مثلي< /td> <td>يحتاج إلى مزيد من الاستماع</td> </tr> </tbody> </table> <table Summary="أقراص DVD التي شاهدتها مؤخرًا" class="footcollapse"> <caption>أقراص DVD الأخيرة الخاصة بي</caption > <thead> <tr> <th>العنوان</th> <th>الجودة</th> </tr> </thead> <tfoot> <tr> <th>الإجمالي</th> <td>5 أقراص DVD </td> </tr> </tfoot> <tbody> <tr> <th>الموسم السابع من Star Trek TNG</th> <td>لقد فقدوه</td> </tr> <tr class="odd "> <th>السمكة الكبيرة</th> <td>حكاية رائعة</td> </tr> <tr> <th>أقرب</th> <td>أريد استعادة وقتي!</td> </ tr> tr> <tr class="odd"> <th>اللقطات الساخنة</th> <td>تستحق العناء دائمًا</td> </tr> <tr> <th>الحفلة</th> <td> من العار أنه لم يعد هناك المزيد من البائعين</td> </tr> </tbody> </table> </body> </html>
