0

HTML テーブルがあり、そのテーブルにはグループとして表示または非表示に切り替えたい行がいくつかあります。それらを単純に<div>囲むことはできないので、それらを「グループ化」するための良い方法は何でしょうか.

4

6 に答える 6

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 に答える
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 に答える
1

tbody タグを使用できます。id 属性を設定できます。

tbody id="顧客 1"

<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

純粋なJavaScriptjsfiddle

<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()

テーブルで複数の tbody(s) を使用する @ user1689607 ソリューションも適切なソリューションです。

于 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 に答える