3

tdのトグルクラスと次の行tdのトグルモアクラスで生成されたテーブルがあります。

親TRをターゲットにして、tdtogglelinkクラスの後に次のTRの可視性を切り替えてnextuntilを使用し、tdtoggle-moreのnextuntil親trを指定しようとしています。

これは私のテーブルです

<table  width=100% >
      <tr>
        <th>Description</th>
        <th>Actions</th>
      </tr>

      <tr>
        <td class="toggle">Agriculture</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="toggle-more" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aquaculture</td>
        <td><input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr>
        <td class="toggle-more" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dairy Production</td>
        <td ><input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr>
        <td class="toggle-more" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horitculture</td>
        <td><input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr>
        <td class="toggle">Blah Blah</td>
        <td >&nbsp;</td>
      </tr>
      <tr  class="toggle-more" >
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aquaculture</td>
        <td><input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr  class="toggle-more">
        <td >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dairy Production</td>
        <td ><input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr  class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horitculture</td>
        <td><input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr>
        <td class="toggle">Blah Blah</td>
        <td >&nbsp;</td>
      </tr>
      <tr  class="toggle-more" >
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aquaculture</td>
        <td><input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr  class="toggle-more">
        <td >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dairy Production</td>
        <td ><input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr  class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horitculture</td>
        <td><input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr>
        <td>Health</td>
        <td><input type="checkbox" name="LookUpItem_16" value="1910|Dental">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr >
        <td >Dental</td>
        <td ><input type="checkbox" name="LookUpItem_16" value="1910|Dental">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
    </table>

これが私のjQueryです。

    $(document).ready(function(){
var showText='+ Show Options';
var hideText='- Hide Options';
var is_visible = false;  

$('.toggle').wrapInner('<a href="#" class="toggleLink" />');
$('.toggleLink').append( ' <span class="showtext">'+showText+'</span>' );
$('.toggle').css({ 
        //width: '100%'
}); 
$('.toggle-more').closest( 'tr' ).hide();
$('a.toggleLink').click(function() {
    is_visible = !is_visible;
    $('.showtext').html( ($('.showtext').html() == hideText) ? showText : hideText);
    $(this).parents('tr').nextUntil('td:not(.toggle-more)').animate({ opacity: "toggle" });
    return false; 
});
});

それはほとんど動作します。私は何を間違っているのですか？これを行うためのより良い方法はありますか？

過去2行はトグルではないか、トグルがあります。

4

2 に答える 2

0

1 つの論理アイテムを表すために複数のテーブル行が必要になる場合はいつでも、それらの行を<tbody>タグにグループ化することをお勧めします (そうです、完全に有効な HTML です)。

そうすること.nextUntil()で、メソッドを優先して廃棄することができ.siblings()、私の意見では、jQuery で簡単に操作できるようになります。

JsFiddle :デモはこちら

HTML:

<table width="100%">
    <thead>
        <tr>
            <th>Description</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="toggle">Agriculture</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aquaculture</td>
            <td>
                <input type="checkbox" name="LookUpItem_1" value="110|Aquaculture" />
                &nbsp;Click&nbsp;to&nbsp;Select
            </td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dairy Production</td>
            <td>
                <input type="checkbox" name="LookUpItem_2" value="120|Dairy Production" />
                &nbsp;Click&nbsp;to&nbsp;Select
            </td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horitculture</td>
            <td>
                <input type="checkbox" name="LookUpItem_3" value="130|Horitculture" />
                &nbsp;Click&nbsp;to&nbsp;Select
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="toggle">Blah Blah</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aquaculture</td>
            <td>
                <input type="checkbox" name="LookUpItem_1" value="110|Aquaculture" />
                &nbsp;Click&nbsp;to&nbsp;Select
            </td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dairy Production</td>
            <td>
                <input type="checkbox" name="LookUpItem_2" value="120|Dairy Production" />
                &nbsp;Click&nbsp;to&nbsp;Select
            </td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horitculture</td>
            <td>
                <input type="checkbox" name="LookUpItem_3" value="130|Horitculture" />
                &nbsp;Click&nbsp;to&nbsp;Select
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>Health</td>
            <td>
                <input type="checkbox" name="LookUpItem_16" value="1910|Dental" />
                &nbsp;Click&nbsp;to&nbsp;Select
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>Dental</td>
            <td>
                <input type="checkbox" name="LookUpItem_16" value="1910|Dental" />
                &nbsp;Click&nbsp;to&nbsp;Select
            </td>
        </tr>
    </tbody>
</table>

jQuery:

$(function(){
    var showText='+ Show Options';
    var hideText='- Hide Options';

    $('.toggle').wrapInner('<a href="#" class="toggleLink" />');
    $('.toggleLink').append( ' <span class="showtext">'+showText+'</span>' );
    $('table tbody').each(function(){
        $(this).find('tr').not(':first').hide(); 
    });

    $('a.toggleLink').click(function() {
        var $a = $(this);
        $a.find('.showtext').html( ($a.find('.showtext').html() == hideText) ? showText : hideText);
        $a.closest('tr').siblings('tr').animate({ opacity: "toggle" });

        return false; 
    });
});

それが役に立てば幸い。

于 2013-02-05T18:19:45.543 に答える
0

これがあなたが探しているものだと思います：http://jsbin.com/equqaw/1/

ここでわかるように、マークアップと jQuery にいくつかの変更を加えました。すべてのtoggleおよびtoggle-moreクラスが にtrあり、クリック機能も少し異なります。

マークアップ:

<table>
    <tr>
        <th>Description</th>
        <th>Actions</th>
    </tr>

    <tr class="toggle">
        <td>Agriculture</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aquaculture</td>
        <td>
            <input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dairy Production</td>
        <td>
            <input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horitculture</td>
        <td>
            <input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr class="toggle">
        <td>Blah Blah</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aquaculture</td>
        <td>
            <input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dairy Production</td>
        <td>
            <input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horitculture</td>
        <td>
            <input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr class="toggle">
        <td>Blah Blah</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aquaculture</td>
        <td>
            <input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dairy Production</td>
        <td>
            <input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horitculture</td>
        <td>
            <input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr>
        <td>Health</td>
        <td>
            <input type="checkbox" name="LookUpItem_16" value="1910|Dental">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr>
        <td>Dental</td>
        <td>
            <input type="checkbox" name="LookUpItem_16" value="1910|Dental">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
</table>

jQuery:

$(document).ready(function () {
    var showText = '+ Show Options';
    var hideText = '- Hide Options';

    $('.toggle td:nth-child(2)').wrapInner('<a href="#" class="toggleLink" />');
    $('.toggleLink').append(' <span class="showtext">' + showText + '</span>');
    $('.toggle').css({
        //width: '100%'
    });
    $('.toggle-more').closest('tr').hide();
    $('a.toggleLink').click(function () {
        var showTextSpan = $(this).find('.showtext');
        showTextSpan.html((showTextSpan.html() == hideText) ? showText : hideText);
        $(this).closest('tr').nextUntil('tr:not(.toggle-more)').animate({
            opacity : "toggle"
        });
        return false;
    });
});

それが役立つことを願っています。ご不明な点がございましたら、コメントとしてお気軽にお問い合わせください...

于 2013-02-05T18:20:44.480 に答える