3

私は会社のかなり大きなテーブルを持っています。これらの会社には娘がいる可能性があり、これらはその下にリストされています。会社ごとに娘の各「セクション」を切り替えられるようにしたいです。

会社に娘がいる場合は、画像を表示する<span class="image">それぞれに を追加しました。<td>画像をクリックすると、娘の行が切り替わります。

レイアウトは次のようになります。

 <tr>
     <td><span class="image"></span>
     <td>Company</td>
 </tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr><td>Company</td></tr>
 <tr><td>Company</td></tr>
 <tr><td>Company</td></tr>
 <tr>
     <td><span class="image"></span>
     <td>Company</td>
 </tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>

 etc

これまでのところ、私はこれを思いつきました：

$('.image').click(function(){ 
    var closest = $(this).closest('tr')
    $('tr.company_daughter').each(function(){
            closest.hide();
        }
    );
});

各企業は自分の娘のみを表示する必要があります

ただし、「セクション」の問題を正しく理解できないようです。

4

3 に答える 3

1

以下のコードは、必要なものです。

$('.image').click(function(){ 
    // get the clicked company row
    var closest = $(this).closest('tr');
    //give main company class "company"
    closest.nextUntil("tr.company").each(function(){
            //Every this means tr.company_daughter
            $(this).toggle();
        }
    );
});
于 2013-06-19T14:27:20.267 に答える
1

これでうまくいくと思います。クリックcompany_daughterするとすべて非表示になります。.image

$(".image").click(function() {
    $(this).closest("tr").nextUntil("tr:not(.company_daughter)").toggle();
});

デモ: http://jsfiddle.net/Rj5Ac/2/

于 2013-06-19T14:26:46.330 に答える
1

現在テストされていませんが、私はお勧めします：

$('.image').click(function(){
    $(this).closest('tr').nextUntil('tr:has(".image")').toggle();
});

参考文献:

于 2013-06-19T14:27:09.837 に答える