隐藏/显示 HTML 表格 [关闭]

Question

我有一个包含表格的 HTML 文档。有些表是其他表的子表。可以举个例子here：

HTML：

<table class='top'>
    <tr class='greyrow'>
        <td>TopLevel</td>
        <td>A</td>
    </tr>
</table>
<table class='sub1'>
    <tr class='greyrow'>
        <td>SubLevel 1</td>
        <td>B</td>
    </tr>
</table>
<table class='sub2'>
    <tr class='greyrow'>
        <td>SubLevel 2</td>
        <td>C</td>
    </tr>
</table>
<table class='sub2'>
    <tr class='greyrow'>
        <td>SubLevel 2</td>
        <td>D</td>
    </tr>
</table>
<table class='sub1'>
    <tr class='greyrow'>
        <td>SubLevel 1</td>
        <td>E</td>
    </tr>
</table>
<table class='sub2'>
    <tr class='greyrow'>
        <td>SubLevel 2</td>
        <td>F</td>
    </tr>
</table>
<table class='top'>
    <tr class='greyrow'>
        <td>TopLevel</td>
        <td>G</td>
    </tr>
</table>
<table class='sub1'>
    <tr class='greyrow'>
        <td>SubLevel 1</td>
        <td>H</td>
    </tr>
    <tr class='greyrow'>
        <td>SubLevel 1</td>
        <td>I</td>
    </tr>
</table>

CSS：

    table {
    border-collapse: collapse;
    border-width: 0px 0;
    box-shadow: 3px 3px 4px #AAA;
}

.greyrow{
    background-color: #c7c7c7;
    font-size: 16px;
    text-align: center;
    color: black;
    font-family: Verdana;
}

td{
    width: 100px;
}

.top{
    margin-bottom: 10px;
}

.sub1{
    display: none;
    margin-left: 20px;
    margin-bottom: 10px;                
}

.sub2{
    display: none;
    margin-left: 40px;
    margin-bottom: 10px;
}

我希望只显示顶级表作为默认值。这可以通过 css 属性“display: none”来完成。

我想在用户点击上层表时显示子表。任何现有的 jquery 脚本？

Answer 1

在这里，我创建了一个 jsfiddle，其中包含您所要求的内容。您可以根据需要创建尽可能多的子表，这段代码仍然可以工作，而且很轻松。

HTML 编辑：我已经将您要级联的表格和从它级联的表格包围在一个带有“.clickable”类的 div 标签中<div class="clickable">...</div>

CSS 编辑：我已将所有具有相同类 (.clickable>.clickable{...}) 的“.clickable”子级设置为 display:none;

JS 编辑：当你点击直接子表元素时，代码被激活。然后它获取该表的父级并使用“.clickable”类找到其直接子级并对其进行滑动切换（如果您愿意，可以设置不同的效果，我假设这是您想要的外观）

HTML

<div class="clickable">
    <table class='top'>
        <tr class='greyrow'>
            <td>TopLevel</td>
            <td>A</td>
        </tr>
    </table>
    <div class="clickable">
        <table class='sub1'>
            <tr class='greyrow'>
                <td>SubLevel 1</td>
                <td>B</td>
            </tr>
        </table>
        <div class="clickable">
            <table class='sub2'>
                <tr class='greyrow'>
                    <td>SubLevel 2</td>
                    <td>C</td>
                </tr>
            </table>
            <table class='sub2'>
                <tr class='greyrow'>
                    <td>SubLevel 2</td>
                    <td>D</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="clickable">
        <table class='sub1'>
            <tr class='greyrow'>
                <td>SubLevel 1</td>
                <td>E</td>
            </tr>
        </table>
        <div class="clickable">
            <table class='sub2'>
                <tr class='greyrow'>
                    <td>SubLevel 2</td>
                    <td>F</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div class="clickable">
    <table class='top'>
        <tr class='greyrow'>
            <td>TopLevel</td>
            <td>G</td>
        </tr>
    </table>
    <div class="clickable">
        <table class='sub1'>
            <tr class='greyrow'>
                <td>SubLevel 1</td>
                <td>H</td>
            </tr>
            <tr class='greyrow'>
                <td>SubLevel 1</td>
                <td>I</td>
            </tr>
        </table>
    </div>
</div>

CSS

table {
    border-collapse: collapse;
    border-width: 0px 0;
    box-shadow: 3px 3px 4px #AAA;
}
.greyrow {
    background-color: #c7c7c7;
    font-size: 16px;
    text-align: center;
    color: black;
    font-family:Verdana;
}
td {
    width: 100px;
}
.top {
    margin-bottom:10px;
}
.sub1 {
    margin-left: 20px;
    margin-bottom:10px;
}
.sub2 {
    margin-left: 40px;
    margin-bottom:10px;
}
.clickable {
    cursor:pointer;
}
.clickable>.clickable {
    display:none;
}

JS

$(".clickable").children("table").click(function () {
    $(this).parent().children(".clickable").slideToggle();
});

Answer 2

我为此创建了一个jsFiddle。这是你要找的吗？

HTML：

<table class='top' id='A'>
    <tr class='greyrow'>
        <td>TopLevel</td>
        <td>A</td>
    </tr>
</table> 
<table class='sub1 sub_A' id='A1'>
    <tr class='greyrow'>
        <td>SubLevel 1</td>
        <td>B</td>
    </tr> 
</table> 
<table class='sub2 sub_A1'>
    <tr class='greyrow'>
        <td>SubLevel 2</td>
        <td>C</td>
    </tr>
</table> 
<table class='sub2 sub_A1'>
    <tr class='greyrow'>
        <td>SubLevel 2</td>
        <td>D</td></tr>
</table>
<table class='sub1 sub_A' id='A2'>
    <tr class='greyrow'>
        <td>SubLevel 1</td>
        <td>E</td>
    </tr>
</table> 
<table class='sub2 sub_A2'>
    <tr class='greyrow'>
        <td>SubLevel 2</td>
        <td>F</td>
    </tr>
</table> 
<table class='top' id='G'>
    <tr class='greyrow'>
        <td>TopLevel</td>
        <td>G</td>
    </tr>
</table>
<table class='sub1 sub_G'>
    <tr class='greyrow'>
        <td>SubLevel 1</td>
        <td>H</td>
    </tr>
    <tr class='greyrow'>
        <td>SubLevel 1</td>
        <td>I</td>
    </tr>
</table>

CSS：

table {
        border-collapse: collapse;
        border-width: 0px 0;
        box-shadow: 3px 3px 4px #AAA;
    }

    .greyrow{
        background-color: #c7c7c7;
        font-size: 16px;
        text-align: center;
        color: black;
        font-family: Verdana;
    }

    td{
        width: 100px;
    }

    .top{
        margin-bottom: 10px;
    }

    .sub1{
        display: none;
        margin-left: 20px;
        margin-bottom: 10px; 
        width: 200px;
    }

    .sub2{
        display: none;
        margin-left: 40px;
        margin-bottom: 10px;
        width: 200px;
    }

JQuery:

$(document).ready(function() {
var Clicks = [];
function click(id, numClicks) {
    this.id = id;
    this.numClicks = numClicks;
}
$(".top").click(function() {
    var access = -1;
    for (var c=0;c<Clicks.length;c++) {
        if (Clicks[c].id === this.id) {
            Clicks[c].numClicks += 1;
            access = c;
            c = Clicks.length;
        }
    }
    if (access === -1) {
        access = Clicks.length;
        Clicks.push(new click(this.id, 1));
    }
    if (Clicks[access].numClicks % 2 !== 0) {
        $((".sub_"+(this.id))).css('display', 'block');
    } else {
        $((".sub_"+(this.id)+'1')).css("display", "none");
        $((".sub_"+(this.id))).css("display", "none");
    }
});
$(".sub1").click(function() {
    id = this.id;
    var access = -1;
    for (var c=0;c<Clicks.length;c++) {
        if (Clicks[c].id === id) {
            Clicks[c].numClicks += 1;
            access = c;
            c = Clicks.length;
        }
    }
    if (access === -1) {
        access = Clicks.length;
        Clicks.push(new click(this.id, 1));
    }
    if (Clicks[access].numClicks % 2 !== 0) {
        $((".sub_"+(id))).css('display', 'block');
    } else {
        $((".sub_"+(id))).css("display", "none");
    }
});
});