Javascript 隐藏/显示HTML表格_Javascript_Jquery_Html_Css_Html Table

Javascript 隐藏/显示HTML表格

javascript jquery html css

Javascript 隐藏/显示HTML表格,javascript,jquery,html,css,html-table,Javascript,Jquery,Html,Css,Html Table,我有一个包含表格的HTML文档。有些表是其他表的子表。你可以举一个例子： HTML: <table class='top'> <tr class='greyrow'> <td>TopLevel</td> <td>A</td> </tr> </table> <table class='sub1'> <tr class='greyr

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

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属性“display:none”实现

我想在用户单击上层表时显示子表。是否有用于此目的的jquery脚本？

我做了一个尝试。这就是你要找的吗

HTML:

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

$（文档）.ready（函数（）{
var=[]；
函数单击（id，numClicks）{
this.id=id；
this.numClicks=numClicks；
}
$（“.top”）。单击（函数（）{
var-access=-1；
对于（var c=0；c这里，我已经根据您的要求创建了一个。您可以创建尽可能多的子表，这段代码仍然可以工作，而且非常简单
HTML编辑：我已经包围了从中层叠的表，并且从中层叠的表以div标记的形式与类“.clickable”…

CSS编辑：我已将同一类（.clickable>.clickable{…}
）的所有“.clickable”子级设置为显示：无；

JS edit：当您单击immediate child table元素时，该代码被激活。然后，它会获取该表的父级，并使用“.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>

JS
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;
}

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

“是否有用于此的现有jquery脚本？”
-您的意思是像.hide（）
和.show（）一样在基本jQuery库中？谢谢你有用的回答！两件事：当用户再次单击同一个表时，我还需要隐藏子表。并且子表的数量没有限制。我可能知道如何隐藏它们，但我不知道如何智能处理许多子级。哦，我想是t他说，你可以添加一些计数器来查看表是第一次还是第二次被单击。但是，我只是将所有需要的ID和类硬编码到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>

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;
}

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