web-dev-qa-db-ja.com

JavaScriptクラスを使用したテーブル行の表示/非表示

私はある種のテーブルを展開したり折りたたんだりしていますが、それを使用するには面倒になりすぎており、IEであり、Firefoxはそれで適切に動作していません。

だから、ここにJavaScriptコードがあります：

  function toggle_it(itemID){ 
      // Toggle visibility between none and '' 
      if ((document.getElementById(itemID).style.display == 'none')) { 
            document.getElementById(itemID).style.display = '' 
            event.preventDefault()
      } else { 
            document.getElementById(itemID).style.display = 'none'; 
            event.preventDefault()
      }    
  }

サンプルHTML：

<table>
    <tr>
        <td>Product</td>
        <td>Price</td>
        <td>Destination</td>
        <td>Updated on</td>
    </tr>
    <tr>
        <td>Oranges</td>
        <td>100</td>
        <td><a href="#" id="toggle" onClick="toggle_it('tr1');toggle_it('tr2')">+ On Store</a></td>
        <td>22/10</td>
    </tr>
    <tr id="tr1" style="display:none">
        <td></td>
        <td>120</td>
        <td>City 1</td>
        <td>22/10</td>
    </tr>
    <tr id="tr2" style="display:none">
        <td></td>
        <td>140</td>
        <td>City 2</td>
        <td>22/10</td>
    </tr>
    <tr>
        <td>Apples</td>
        <td>100</td>
        <td><a href="#" id="toggle" onClick="toggle_it('tr3');toggle_it('tr4')">+ On Store</a></td>
        <td>22/10</td>
    </tr>
    <tr id="tr3" style="display:none">
        <td></td>
        <td>120</td>
        <td>City 1</td>
        <td>22/10</td>
    </tr>
    <tr id="tr4" style="display:none">
        <td></td>
        <td>140</td>
        <td>City 2</td>
        <td>22/10</td>
    </tr>
</table>

問題は、それぞれに1つのIDを使用することです。これは、各親と多くの親に対して多くの非表示行を持ちたいため、非常に迷惑です。したがって、処理するにはIDが多すぎます。そして、IEとFireFoxは最初の非表示行のみを表示し、他の行は表示しません。これは、すべてのIDを一緒にトリガーすることで機能させたためだと思います。 IDの代わりにクラスを使用して、非表示の行を識別します。

私はこのすべてに本当に慣れていないので、単純な方法で説明してみてください。また、jQueryを試してみましたが、取得できませんでした。

javascripthtml-tableexpand
12
user2957683

このサンプルで何をしようとしているのかを理解することは困難ですが、実際にはクラスの使用について考える正しい軌道に乗っています。私は、JSFiddleを作成して、これをやや改善する方法（希望）を示しました。

ここにフィドルがあります： link 。

あなたがすることは、IDを扱う代わりに、クラスを扱うことです。コードサンプルには、オレンジとリンゴがあります。私はそれらを独自のIDを持つ製品カテゴリとして扱います（私はあなたの目的が本当に分からないので）。そこで、製品_<tr>_ sを_class="cat1"_または_class="cat2"_でマークします。

また、単純な_.toggler_クラスでリンクをマークします。要素自体にonclick属性を設定することはお勧めできません。 JavaScriptを使用して、ページの読み込み時にイベントを「バインド」する必要があります。これはjQueryを使用して行います。

_$(".toggler").click(function(e){
    // you handle the event here
});
_

この形式では、クラスclickを持つリンクのtogglerイベントにイベントハンドラーをバインドします。私のコードでは、togglerリンクに_data-prod-cat_属性を追加して、どの製品行を制御するかを指定します。 （_data-*_属性を使用する理由は here で説明されています。詳細については、Googleの「html5データ属性」を参照してください。）

イベントハンドラーで、これを行います。

_$('.cat'+$(this).attr('data-prod-cat')).toggle();
_

このコードでは、実際に$('.cat1')のようなセレクターを作成して、特定の製品カテゴリーの行を選択し、それらの可視性を変更しようとしています。 $(this).attr('data-prod-cat') thisを使用して、ユーザーがクリックするリンクの_data-prod-cat_属性にアクセスします。 jQuery toggle 関数を使用しているため、JSコードで行うような_if visible, then hide element, else make it visible_のようなロジックを記述する必要はありません。 jQueryはそれを扱います。トグル関数は、指定された要素の可視性とtogglesを実行します。

これで十分説明できるといいのですが。

16
Taylan Aydinli

それを行う1つの方法は、クラスを「親」行に配置し、すべてのIDとインラインonclick属性を削除することです。

<table id="products">
    <thead>
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Destination</th>
        <th>Updated on</th>
    </tr>
    </thead>
    <tbody>
    <tr class="parent">
        <td>Oranges</td>
        <td>100</td>
        <td><a href="#">+ On Store</a></td>
        <td>22/10</td>
    </tr>
    <tr>
        <td></td>
        <td>120</td>
        <td>City 1</td>
        <td>22/10</td>
    </tr>
    <tr>
        <td></td>
        <td>140</td>
        <td>City 2</td>
        <td>22/10</td>
    </tr>
    ...etc.
    </tbody>
</table>

そして、すべての非親を非表示にするCSSを用意します。

tbody tr {
    display : none;          // default is hidden
}
tr.parent {
    display : table-row;     // parents are shown
}
tr.open {
    display : table-row;     // class to be given to "open" child rows
}

これにより、htmlが大幅に簡素化されます。マークアップに<thead>と<tbody>を追加して、データ行を簡単に非表示にし、見出し行を無視しやすくしていることに注意してください。

JQueryを使用すると、次のことが簡単にできます。

// when an anchor in the table is clicked
$("#products").on("click","a",function(e) {
    // prevent default behaviour
    e.preventDefault();
    // find all the following TR elements up to the next "parent"
    // and toggle their "open" class
    $(this).closest("tr").nextUntil(".parent").toggleClass("open");
});

デモ： http://jsfiddle.net/CBLWS/1/

または、そのようなものをプレーンJavaScriptで実装するには、おそらく次のようなものです。

document.getElementById("products").addEventListener("click", function(e) {
    // if clicked item is an anchor
    if (e.target.tagName === "A") {
        e.preventDefault();
        // get reference to anchor's parent TR
        var row = e.target.parentNode.parentNode;
        // loop through all of the following TRs until the next parent is found
        while ((row = nextTr(row)) && !/\bparent\b/.test(row.className))
            toggle_it(row);
    }
});

function nextTr(row) {
    // find next sibling that is an element (skip text nodes, etc.)
    while ((row = row.nextSibling) && row.nodeType != 1);
    return row;
}

function toggle_it(item){ 
     if (/\bopen\b/.test(item.className))       // if item already has the class
         item.className = item.className.replace(/\bopen\b/," "); // remove it
     else                                       // otherwise
         item.className += " open";             // add it
}

デモ： http://jsfiddle.net/CBLWS/

いずれにせよ、JavaScriptを本文の最後にある<script>要素に入れて、テーブルが解析された後に実行されるようにします。

5
nnnnnn

JQuery 10.1.2には、説明している動作をカプセル化するナイスな表示および非表示機能があります。これにより、新しい関数を記述したり、CSSクラスを追跡したりする必要がなくなります。

$("tr1").show();

$("tr1").hide();

jQueryの表示と非表示へのw3cSchoolリンク

4
spartikus
event.preventDefault()

すべてのブラウザで機能するわけではありません。代わりに、OnClickイベントでfalseを返すことができます。

onClick="toggle_it('tr1');toggle_it('tr2'); return false;">

これが最善の方法であるかどうかはわかりませんが、IE、FF、およびChromeおよびその動作は正常です。

2
Poornima

以下は、「agencyrow」というIDを持つテーブル行を表示/非表示にするスクリプトです。

_<script type="text/javascript">

                        function showhiderow() {
                            if (document.getElementById("<%=RadioButton1.ClientID %>").checked == true) {

                                document.getElementById("agencyrow").style.display = '';
                            } else {

                                document.getElementById("agencyrow").style.display = 'none';
                            }


                        }
    </script> 
_

関数showhiderow() uponラジオボタンonClickイベントを呼び出すだけです

1
Vijay Kumbhoje

AngularJSディレクティブng-show、ng-hideは、行の表示と非表示を許可します。

   <tr ng-show="rw.isExpanded">
   </tr>

行は、rw.isExpanded == trueの場合に表示され、rw.isExpanded == falseの場合は非表示になります。 ng-hideは同じタスクを実行しますが、逆条件が必要です。

0
user1920925