表格中使用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>


你可能感兴趣的:(表格中使用tboy展开和隐藏例子)