javascript表格内容的展开和折叠

最新推荐文章于 2025-06-22 11:56:11 发布

啊哈前端

最新推荐文章于 2025-06-22 11:56:11 发布

阅读量5.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/wuzhe128520/article/details/50482395

javascript 专栏收录该内容

62 篇文章

订阅专栏

本文介绍了一个简单的HTML页面实现表格中行的展开和折叠功能。通过JavaScript控制按钮状态，实现行的显示与隐藏效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格内容的展开和折叠</title>
    <style>
        h2,h5,#tooltipMsg,p {
            white-space: nowrap;
        }
        td {
            border: 1px solid #ccc;
            height: 50px;
            text-align: center;
            font-size: 10pt;
            padding: 2px;
        }
    </style>
</head>
<body>
<table id="tableOutIn" border="1" width="500">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>
<input type="button" id="openRow" data-statu="true" value="展开/收缩" />
    <script>
        window.onload=function(){
            var tableOutIn=function(e,type){  //没有var声明在ie上会报错
                if(!type){
                    e.style.display="none";//隐藏指定的行元素
                }
                else {
                    e.style.display="table-row"; //table-row设置此元素会作为一个表格行显示
                }
            }
            var _tableOutIn=document.getElementById("tableOutIn"),statu=true;
            document.getElementById("openRow").onclick=function(){ //展开一行 openRow
                statu=!statu;
                tableOutIn(_tableOutIn.rows[0],statu);
            }
        }
    </script>
</body>
</html>