js实现fieldset折叠

最新推荐文章于 2021-11-30 07:06:38 发布

白杨湖

最新推荐文章于 2021-11-30 07:06:38 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/ubuntu_yanglei/article/details/50524251

本文介绍了如何使用JavaScript实现字段折叠功能，通过监听legend元素的点击事件，动态切换table元素的显示状态，实现表格区域的折叠与展开效果。

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

用js实现field折叠，主要利用table的显示和隐藏。

首先看元素：

<fieldset>
        <legend>单元1</legend>
        <table cellPadding="1" cellSpacing="1" border="0"  class="panel-t">
            <tr>
                <td >
                    <input value="姓名">
                    <input value="年龄">
                </td>
            </tr>
        </table>
    </fieldset>

js控制样式的变化：

function initToggle() {
            var legends = document.getElementsByTagName('legend');
            for (var i = 0, len = legends.length; i < len; i++) {
                legends[i].onclick = function () {//绑定事件
                    for (var j = 0, ln = this.parentElement.childNodes.length; j < ln; j++) {
                        var nodeName = this.parentElement.childNodes[j].nodeName;
                        if (nodeName && nodeName.toUpperCase() ===
                                'TABLE') {//兼容浏览器,有的浏览器childNodes的个数不同
                            var tbl = this.parentElement.childNodes[j];
                            if (tbl.style.display === 'none') {
                                tbl.style.display = 'block';
                            } else {
                                tbl.style.display = 'none';
                            }
                        }
                    }
                }
            }

        }
        document.onreadystatechange = function() { //页面加载完后，注册事件
            if (document.readyState == "complete") {
                initToggle();
            }
        }