Русский
После запуска и просмотра эффекта вы можете нажать стрелку вниз, чтобы развернуть таблицу, и нажать кнопку вверх, чтобы сжать таблицу! Надеюсь, это полезно для вас!
<!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() { /* Переменные */ var коллапскласс='footcollapse'; var коллапсPic=''; var angularPic=''; var InitialCollapse=true; // циклически перебираем все; таблицы var t=document.getElementsByTagName('table'); var checktest= new RegExp("(^|\s)" + коллапскласс + "(\s|$)" for (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'); 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='#'; 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;font-size:90%;background:#cc9; f8f8f8; ширина: 40em; } h1 {семейство шрифтов: "Trebuchet MS", без засечек; текст-трансформация: верхний регистр; размер шрифта: 120%; :30em; } table.footcollapse caption{font-size:120%; text-align:left;padding:.5em 1em; } table.footcollapse th{text-align:left; ,table.footcollapse th,table.footcollapse th { border:none; border-collapse:collapse; } table.footcollapse thead th { width:10em; border-width:1px; #69c #69c #cff; фон:#9cf; дополнение:2px 10px; } table.footcollapse tfoot th, table.footcollapse tfoot td { border-style:solid; border-width:1px; #369 #9cf; фон:#69c; дополнение:2px 10px; } table.footcollapse tbody{background:#ddd; } table.footcollapse tbody td{padding:5px 10px; border:1px Solid #999; th { дополнение: 2 пикселя 10 пикселей; граница: 1 пиксель # 999; граница слева: нет; } table.footcollapse tbody tr.odd {background: #ccc; } table.footcollapse tfoot td img { border: none; footing-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>Front 242</th> <td>Front By Front</td> <td>Вполне нормально</td> </tr> <tr class="odd"> <th>Мисс Киттин</th> <td>i.com</td> <td>хорошая покупка</td> < /tr> <tr> <th>Фантастическая жизнь</th> <td>Виэль</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="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 7</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>
