• 新聞資訊

    首頁 > 建站知識 > 使用jQuery展開/折疊表格中的行
    使用jQuery展開/折疊表格中的行發布時間:2019-08


    <head>
    <title>使用jQuery展開/折疊表格中的行 by www.865171.cn</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
    body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
    #report { border-collapse:collapse;}
    #report h4 { margin:0px; padding:0px;}
    #report img { float:right;}
    #report ul { margin:10px 0 10px 40px; padding:0px;}
    #report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
    #report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
    #report tr.odd td { background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer; }
    #report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
    #report div.up { background-position:0px 0px;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#report tr:odd").addClass("odd");
    $("#report tr:not(.odd)").hide();
    $("#report tr:first-child").show();
    $("#report tr.odd").click(function(){
    $(this).next("tr").toggle();
    $(this).find(".arrow").toggleClass("up");
    });
    });
    </script>
    </head>
    <body>
    <h1>使用jQuery展開/折疊表格中的行</h1>
    <p>Demo for <a href="http://www.865171.cn/css-code/">更多CSS代碼實例</a></p>
    <table id="report">
    <tr>
    <th>Country</th>
    <th>Population</th>
    <th>Area</th>
    <th>Official languages</th>
    <th></th>
    </tr>
    <tr>
    <td>United States of America</td>
    <td>306,939,000</td>
    <td>9,826,630 km2</td>
    <td>English</td>
    <td>
    <div class="arrow"></div>
    </td>
    </tr>
    <tr>
    <td colspan="5"> <img src="125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" />
    <h4>Additional information</h4>
    <ul>
    <li>USA on Wikipedia</li>
    <li>National Atlas of the United States</li>
    <li>Historical Documents</li>
    </ul>
    </td>
    </tr>
    <tr>
    <td>United Kingdom </td>
    <td>61,612,300</td>
    <td>244,820 km2</td>
    <td>English</td>
    <td>
    <div class="arrow"></div>
    </td>
    </tr>
    <tr>
    <td colspan="5"> <img src="125px-Flag_of_the_United_Kingdom.svg.png" alt="Flag of UK" />
    <h4>Additional information</h4>
    <ul>
    <li>UK on Wikipedia</li>
    <li>Official tourist guide to Britain</li>
    <li>Official Yearbook of the United Kingdom</li>
    </ul>
    </td>
    </tr>
    <tr>
    <td>India</td>
    <td>1,147,995,904</td>
    <td>3,287,240 km2</td>
    <td>Hindi, English</td>
    <td>
    <div class="arrow"></div>
    </td>
    </tr>
    <tr>
    <td colspan="5"> <img src="125px-Flag_of_India.svg.png" alt="Flag of India" />
    <h4>Additional information</h4>
    <ul>
    <li>India on Wikipedia</li>
    <li>Government of India</li>
    <li>India travel guide</li>
    </ul>
    </td>
    </tr>
    <tr>
    <td>Canada</td>
    <td>33,718,000</td>
    <td>9,984,670 km2</td>
    <td>English, French</td>
    <td>
    <div class="arrow"></div>
    </td>
    </tr>
    <tr>
    <td colspan="5"> <img src="125px-Flag_of_Canada.svg.png" alt="Flag of Canada" />
    <h4>Additional information</h4>
    <ul>
    <li>Canada on Wikipedia</li>
    <li>Official Government of Canada online Atlas of Canada</li>
    <li>Canada travel guide</li>
    </ul>
    </td>
    </tr>
    <tr>
    <td>Germany</td>
    <td>82,060,000</td>
    <td>357,021 km2</td>
    <td>German</td>
    <td>
    <div class="arrow"></div>
    </td>
    </tr>
    <tr>
    <td colspan="5"> <img src="125px-Flag_of_Germany.svg.png" alt="Flag of Germany" />
    <h4>Additional information</h4>
    <ul>
    <li>Germany on Wikipedia</li>
    <li>Deutschland.de Official Germany portal</li>
    <li>Germany Travel Info</li>
    </ul>
    </td>
    </tr>
    </table>
    <em>&copy; www.865171.cn</em>
    </body>
    </html>


    A片毛片免费视频在线看 - 视频 - 在线观看 - 影视资讯 - 品尚网