日本語
実行して効果を確認した後、下矢印をクリックしてテーブルを拡大し、上ボタンをクリックしてテーブルを縮小できます。お役に立てば幸いです!
<!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" /> <title>www.downcodes.com< /title> <script language="javascript"> function tablecollapse() { /* 変数 */ var CollapsePic=''; // すべてをループします。テーブル var t=document.getElementsByTagName('table'); var checktest= new RegExp("(^|\s)" + CollapseClass + "(\s|$)"); <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.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,font-size:90%; } #boundary:# f8f8f8; パディング:2em; 幅:40em; } h1{ フォントファミリー:"Trebuchet MS"; フォントサイズ:120%; :30em; } table.footcollapse キャプション{ font-size:120%; text-align:left; } table.footcollapse th{ text-align:left; ,table.footcollapse th,table.footcollapse th { border-collapse:collapse; } table.footcollapse th { width:10em; border-color:#cff; #69c #69c #cff; 背景:#9cf; パディング:2px 10px; } table.footcollapse tfoot td { border-style:solid:#9cf #369 #369 #9cf; パディング:2px 10px; } table.footcollapse tbody{ 背景:#ddd; } table.footcollapse tbody th{ パディング:2px 10px; ボーダー:1px ソリッド #999; table.footcollapse tbody tr.odd{ 背景:#ccc; </style> </head> <body> <table summary="最近聴いた CD" class="footcollapse"> <caption> > <thead> <tr> <th>タイトル</th> <th>アーティスト</th> <th>品質</th> </tr> </thead> <tfoot> <tr> <th>合計< /th> <tdcolspan="2">5 CD</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>ナインインチ爪</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 class="odd"> <th>ホットショット</th> <td>常に価値がある</td> </tr> <tr> <th>パーティー</th> <td>残念ながらこれ以上の販売者はいません</td> </tr> </tbody> </table> </body> </html>
