2

次の自動生成されたテーブル レイアウトを使用します (私はほとんど影響を与えません)。

<table>
   <tr>
      <th>First Header</th>
      <th>
         <a href="#" class="used-for-some-action">show/hide</a>
      </th>
   </tr>
   <tr>
      <td>A question?</td>
      <td><input value="User's answer" /></td>
   </tr>
   <!-- Some more rows -->

   <tr>
      <th>Second Header</th>
   </tr>

   <!-- Some more question blocks -->
</table>

<tr>...次のような機能を提供するために、Javascript/jQuery を使用して 2 つのヘッダー間のすべての要素を選択したいと思います。

  • 特定のヘッダーに属するすべての質問を非表示にします。
  • を自動的に編集します<input>(たとえば、すべてをチェック/チェック解除するか、デフォルトに戻す) 。

目的のアクションを引き起こすリンクは、正しいヘッダーに既に含まれています。

この問題にアプローチする最善の方法は何でしょうか?

4

4 に答える 4

5

この問題を解決するには、 nextUntil()を使用します。

function getRows(start){
    return start.nextUntil(function(i, v){
        return $('th', v).length > 0;
    });
}

デモ:フィドル

表示/非表示の実装

$('table').on('click', '.used-for-some-action', function(){
    getRows($(this).closest('tr')).toggle();
    return false;
});

デモ:フィドル

更新:
@BLSully のコメントに基づく

$('table').on('click', '.used-for-some-action', function(){
    $(this).closest('tr').nextUntil('tr:has(th)').toggle();
    return false;
});

デモ:フィドル

于 2013-04-08T15:40:49.510 に答える
1

私はそれを本当にシンプルに保ちます。JavaScript を使用しているため、ページがロードされたら、クラスを で行に追加し、そのクラスを<th>使用します。

$(function() {
    $("th").parent().addClass("hasTH");
});

hasTH次に、クラスを持つ行を単純にターゲットにすることができます。

別のオプションは、ページの読み込み時に引き続き行うことですが、クラスを追加する代わりに、行を新しい<tbody>要素にグループ化します。これにより、最も純粋な DOM 表現が得られます。

于 2013-04-08T15:52:00.283 に答える
1

Arun P Johnyの答えが好きです。これが私が最初に考えたことです（このコードは非表示/表示機能を実装しています）

$(".used-for-some-action").click(function(e) {
    e.preventDefault()

    $(this).parents("tr").next().is(":visible") ? $(this).parents("tr").next().hide() : $(this).parents("tr").next().show();
});

フィドル: http://jsfiddle.net/DQMht/1/

于 2013-04-08T15:43:46.397 に答える
0

これを試して：

$("tr:has(th)").each(function(){
    if ($(this).find('th').length==2) {
        // here you have this: that represent the row which have two td
    }
})
于 2013-04-08T15:45:02.437 に答える