한국어
실행하고 효과를 확인한 후 아래쪽 화살표를 클릭하면 테이블이 확장되고 위쪽 버튼을 클릭하면 테이블이 축소됩니다! 그것이 당신에게 유용하길 바랍니다!
<!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 언어="javascript"> function tablecollapse() { /* 변수 */ var CollapseClass='footcollapse'; var CollapsePic=''; var explainPic=''; 테이블 var t=document.getElementsByTagName('table'); var checktest= new RegExp("(^|\s)" +collapseClass + "(\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') 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; 배경:#cc9 } #경계:# f8f8f8; 너비:40em; } h1{ 글꼴 계열:"Trebuchet MS",Sans-serif; 색상:#696; 글꼴 크기:120%; :30em; } table.footcollapse caption{ 글꼴 크기:120%; 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 td { border-style:solid-color:#9cf #369 #369 #9cf; 패딩: 2px 10px; } table.footcollapse tbody{ 배경:#ddd; td{ 패딩: 5px 10px; } table.footcollapse tbody th{ padding:2px 10px; border:1px solid #999; border-left:none; } table.footcollapse tbody tr.odd{ 배경:#ccc; } table.footcollapse tfoot td img{ border:none; Bottom; padding-left:10px; float:right; } </style> </head> <body> <table summary="최근에 들은 CD" class="footcollapse"> <caption>최근 CD</caption > <thead> <tr> <th>제목</th> <th>아티스트</th> <th>품질</th> </tr> </thead> <tfoot> <tr> <th>합계< /th> <td colspan="2">CD 5개</td> </tr> </tfoot> <tbody> <tr> <th>앞 242</th> <td>앞에서 앞으로</td> <td>괜찮습니다</td> </tr> <tr class="odd"> <th>Miss Kittin</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>DVD 5개 </td> </tr> </tfoot> <tbody> <tr> <th>스타 트렉 TNG 시즌 7</th> <td>그들은 그것을 잃었습니다</td> </tr> <tr class="odd "> <th>큰 물고기</th> <td>멋진 이야기</td> </tr> <tr> <th>더 가까이</th> <td>시간을 되돌리고 싶어요!</td> </tr> tr> tr> <tr class="odd"> <th>핫샷</th> <td>언제나 그럴만한 가치가 있습니다</td> </tr> <tr> <th>파티</th> <td> 아쉽게도 판매자가 더 이상 없습니다</td> </tr> </tbody> </table> </body> </html>
