0

我有一个 HTML 表格，该表格中有几行我想切换为作为一个组可见或不可见。既然我不能简单地将<div>它们放在一起，那么将它们“组合”在一起的好方法是什么。

4

6 回答 6

2

您可以将它们分组到单独的<tbody>元素中（因为您不能使用<div>元素，如您所说）。

<table id="mytable">
    <tbody>
        <!-- some rows to group -->
    </tbody>
    <tbody>
        <!-- some rows to group -->
    </tbody>
    <tbody>
        <!-- some rows to group -->
    </tbody>
</table>

然后选择你想要的tbody。

var table = document.getElementById("mytable");

table.tBodies[1].style.display="none";
于 2012-10-26T18:45:09.633 回答
2

尝试以一种可以隐藏/可见并应用您的 css/js 的方式制作您的 html。

<table>
        <tr class="visible"><td></td></tr>
        <tr class="visible"><td></td></tr>
        <tr class="hidden"><td></td></tr>
        <tr class="visible"><td></td></tr>
        <tr class="visible"><td></td></tr>
        <tr class="hidden"><td></td></tr>
        <tr class="visible"><td></td></tr>
</table>
于 2012-10-26T18:41:14.543 回答
1

您可以使用 tbody 标签。您可以在其上设置 id 属性。

tbody id="customer1"

<table>
    <thead>
        <tr><th>Customer</th><th>Order</th><th>Month</th></tr>
    </thead>
    <tbody id="customer1">
        <tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody id="customer2">
        <tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody id="customer3">
        <tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
    </tbody>
</table>

然后使用 JQuery，您可以轻松隐藏/显示。

于 2012-10-26T18:45:06.217 回答
0

纯 JavaScript jsfiddle

<table>
        <tr class="show"><td></td></tr>
        <tr class="show"><td></td></tr>
        <tr class="hide"><td></td></tr>
        <tr class="show"><td></td></tr>
        <tr class="show"><td></td></tr>
        <tr class="hide"><td></td></tr>
        <tr class="show"><td></td></tr>
</table>

JS：

var trGroup = document.getElementsByClassName("hide");
for(var k=0; k < trGroup.length; k++){
     trGroup[k].style.display = "none";
}
于 2012-10-26T18:44:47.310 回答
0

在要分组的行上放置一个公共类。而不是像这样工作

或者你有一些可见或隐藏的规则，行组你可以简单地使用 css + javascript 之类的

HTML

<table id="myGroupTab">
    <tr class="group1"><td>&nbsp;</td></tr>
    <tr class="group1"><td>&nbsp;</td></tr>
    <tr class="group2"><td>&nbsp;</td></tr>
    <tr class="group2"><td>&nbsp;</td></tr>
    <tr class="group1"><td>&nbsp;</td></tr>
</table>

你可以写一些css规则，比如

CSS

#myGroupTab.showGrp1 .group1{ display:block;}
#myGroupTab.showGrp1 .group2{ display:none;}

#myGroupTab.showGrp2 .group1{ display:none;}
#myGroupTab.showGrp2 .group2{ display:block;}

您可以使用 Javascript 之类的

JS

document.getElementById('myGroupTab').className = "showGrp1"; //To Show Only tr.group1
document.getElementById('myGroupTab').className = "showGrp2"; //To Show Only tr.group2

它甚至可以简单地显示不显示或阻止在父级上应用一个类，而不是循环每个 tr...

或者通过 jQuery 你可以实现这一点，使用 jQuery 使它们可见或隐藏。

$("tr.group1").hide() or  $("tr.group2").show()

@user1689607 在表中使用多个 tbody 的解决方案也是一个很好的解决方案。

于 2012-10-26T18:40:40.227 回答
0

我会向您推荐一个 jQuery 解决方案。为您的所有<tr>标签提供一个通用类和一个唯一 ID（供个人选择）。然后你可以使用 jQuery 来抓取它们。

$('tr .commonClass').css("display", "none");

你也可以只用单独的 id 交换类

$('#someTR').removeClass("visibleClass");
$('#someTR').addClass("invisibleClass");

注意：为了记录，我更喜欢@Yograj Gupta 的方法，但他打败了我。

于 2012-10-26T18:41:02.507 回答