表格中使用tboy展開和隱藏例子

時間  2019-12-09
標籤 表格 使用 tboy 展開 隱藏 例子 简体版
原文   原文鏈接
姓名 姓名 姓名
第一列 第二列 第三列
第一列 第二列 第三列
第一列 第二列 第三列
第一列 第二列 第三列
展開第三方快遞
第1列 第二列 第三列
第1列 第二列 第三列
第1列 第二列 第三列
第1列 第二列 第三列 


<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        
        <table border="1" width="800px">
            <tbody>
                <tr><th width="200px">姓名</th><th width="200px">姓名</th><th width="400px">姓名</th></tr>

                <tr><td>第一列</td><td>第二列</td><td>第三列</td></tr>
                <tr><td>第一列</td><td>第二列</td><td>第三列</td></tr>
                <tr><td>第一列</td><td>第二列</td><td>第三列</td></tr>
                <tr><td>第一列</td><td>第二列</td><td>第三列</td></tr>
                <tr style="text-align: center"><td colspan="3"><a href="javascript:void(0)" onclick="showOther();" id="swidText">展開第三方快遞</a></td></tr>
                
            <tbody width="800px" id="lgx" style="display: none">
                <tr><td>第1列</td><td>第二列</td><td>第三列</td></tr>
                <tr><td>第1列</td><td>第二列</td><td>第三列</td></tr>
                <tr><td>第1列</td><td>第二列</td><td>第三列</td></tr>
                <tr><td>第1列</td><td>第二列</td><td>第三列</td></tr>
            </tbody>
            
            </tbody>
        </table>   
    </body>
    
<script type="text/javascript">
    function showOther(){
        var lgx=document.getElementById('lgx');
        var swidText = document.getElementById('swidText');
        if(lgx.style.display=='none'){ // == 判斷div.display是否爲顯示
                lgx.style.display=''; //= 賦值也可瞭解成改
                swidText.innerHTML = '隱藏第三方快遞--';
            }
            else{
                lgx.style.display='none';
                swidText.innerHTML = '展開第三方快遞++';
            }
     }
</script>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程