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编辑：我已经包围了您要进行级联的表格，并且这些表格会在div标签中与类“＃34;”进行级联。可点击的＆＃34; <div class="clickable">...</div>

CSS编辑：我已经设置了所有＆＃34; .clickable＆＃34;同一班级（.clickable>.clickable{...}）到display:none;

的孩子

JS edit ：单击直接子表元素时激活代码。然后它获取该表的父级并使用＆＃34; .clickable＆＃34;找到它的直接子级。 class和slideToggles it（你可以设置不同的效果，我认为这是你想要的样子）

<强> 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");
    }
});
});

隐藏/显示HTML表格

2 个答案: