js实现fieldset折叠

用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();
            }
        }