14

展開したり折りたたんだりするテーブルがありますが、乱雑になりすぎて使用できず、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>

問題は、それぞれの ID に 1 つの ID を使用することです。これは、親ごとに多くの非表示の行が必要なため、処理するには ID が多すぎるため、非常に面倒です。また、IE と FireFox は最初の隠し行のみを表示し、他の行は表示しません。これは、すべての ID をまとめてトリガーすることで機能させたためだと思われます。ID の代わりにクラスを使用して非表示の行を識別した方がよいと思います。

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

4

6 に答える 6

19

このサンプルで何をしようとしているのかを理解するのは難しいですが、実際には、クラスの使用について正しい方向に進んでいます。これを行うための少し良い方法 (希望) を示すために、JSFiddle を作成しました。

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

ID を操作する代わりに、クラスを操作します。コード サンプルには、Oranges と Apples があります。私はそれらを独自のIDを持つ製品カテゴリとして扱います（あなたの目的が本当にわからないため）。そのため、製品<tr>s にclass="cat1"またはを付けclass="cat2"ます。

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

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

この形式ではclick、 class を使用して、イベント ハンドラーをリンクのイベントにバインドしますtoggler。私のコードではdata-prod-cat、リンクに属性を追加して、togglerどの製品行を制御するかを指定しています。(属性を使用する理由については、こちらdata-*で説明しています。詳細については、「html5 データ属性」を Google で検索してください。)

イベント ハンドラーでは、次のようにします。

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

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

これで十分に説明できたことを願っています。

于 2013-11-05T20:18:54.420 に答える
5

JQuery 10.1.2 には、話している動作をカプセル化する優れた show および hide 関数があります。これにより、新しい関数を作成したり、css クラスを追跡したりする必要がなくなります。

$("tr1").show();

$("tr1").hide();

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

于 2014-02-07T16:02:10.403 に答える
2

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

<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()を呼び出すだけonClick

于 2015-09-09T08:22:30.583 に答える