jquery - Jquery +、- を拡張可能なセクションで変更するにはどうすればよいですか

Question

（jqueryを使用）次の機能があります

$(function() {
    $('tr.parent')
        .css("cursor","pointer")
        .attr("title","Click to expand/collapse")
        .click(function(){
            $(this).siblings('.child-'+this.id).toggle();
        });
    $('tr[@class^=child-]').hide().children('td');
});

私は次のウェブページを持っています

<table>
    <col style="width:40px;">
    <col style="width:80px;">
    <col style="width:150px;">
    <col style="width:40px;">
<thead>
    <tr>
        <th>ID</th>
        <th colspan="2">Name</th>
        <th>Total</th>
    </tr>
</thead>
<tbody>
    <tr class="parent" id="row123">
        <td>123</td>
        <td colspan="2">[+]Bill Gates</td>
        <td>100</td>
    </tr>
    <tr class="child-row123">
        <td>&nbsp;</td>
        <td>2007-01-02</td>
        <td>A short description</td>
        <td>15</td>
    </tr>
    <tr class="child-row123">
        <td>&nbsp;</td>
        <td>2007-02-03</td>
        <td>Another description</td>
        <td>45</td>
    </tr>
    <tr class="child-row123">
        <td>&nbsp;</td>
        <td>2007-03-04</td>
        <td>More Stuff</td>
        <td>40</td>
    </tr>

    <tr class="parent" id="row456">
        <td>456</td>
        <td colspan="2">[+]Bill Brasky</td>
        <td>50</td>
    </tr>
    <tr class="child-row456">
        <td>&nbsp;</td>
        <td>2007-01-02</td>
        <td>A short description</td>
        <td>10</td>
    </tr>
</tbody>
</table>

望ましい結果:

展開可能なセクションの左側にある「[+]」と「[-]」のテキストを変更して、展開または圧縮できることを示します。

Answer 1

私はあなたの編集の前にこれを行いましたが、それでも有効だと思います。マークアップをわずかに変更して[+]、独自のセルに入れました。例：

<tr class="parent" id="row123">
    <td>[+]</td>           
    <td>123</td>
    <td colspan="2">Bill Gates</td>
    <td>100</td>
</tr>

次に、コードは単純になります。

$('tr.parent')
    .css("cursor","pointer")
    .attr("title","Click to expand/collapse")
    .click(function(){
        var sibs = $(this).siblings('.child-'+this.id).toggle();
        var expanded = sibs.is(':visible');
        $(this).children('td').eq(0).text( expanded ? '[-]' : '[+]');
    });

実際の例: http://jsfiddle.net/Vxdq8/

2 番目のセル内に +/-が本当に必要な場合は、それをスパンでラップし、上記の関連する行を次のように変更することをお勧めします。

$(this).children('td').eq(1).children('span').text( expanded ? '[-]' : '[+]');

実際の例: http://jsfiddle.net/8J8Vj/

Answer 2

簡単な html/text 置換メソッドを実行できます。

http://jsfiddle.net/xBNGB/

開始状態が開いているのがわかります..だから、ロード時に+を-に変更しました。

スクリプトを次のように変更します。

$(function() {
    $('tr.parent')
        .css("cursor","pointer")
        .attr("title","Click to expand/collapse")
        .click(function(){

            var children = $(this).siblings('.child-'+this.id);
            children.toggle();

            if (children.css('display')=='none')
            $(this).html($(this).html().replace('-','+'));
            else
                $(this).html($(this).html().replace('+','-'));
        });
    $('tr[@class^=child-]').hide().children('td');
});

Answer 3

あなたが取ることができる2つの異なるアプローチ：

1. +/- テキストをスパンでラップし、その項目のステータスが変化したら、.find() を使用してクリックした要素内のスパンを見つけ、その内容を変更します。

2. テキストとして配置するのを忘れて、要素の背景として見栄えの良い画像としてそれらを含めます (対応するために十分なパディングを残してください)。次に、要素のクラスを切り替えて、+ または - の背景画像を表示するだけです。

Answer 4

            $(document).ready(function () {
                $('tr:first').append('<th></th>');

                $('tr.parent').append('<td>+</td>');

                $('tr.parent').css("cursor", "pointer").attr("title", "Click to expand/collapse").click(function () {
                    $(this).siblings('.child-' + this.id).is(':visible') ? $(this).find('td:last').text('+') : $(this).find('td:last').text('-');
                    $(this).siblings('.child-' + this.id).toggle();
                });

                $('tr[class^=child-]').hide();
            });


//Or  

        $(document).ready(function () {
            $('tr:first').append('<th></th>');

            $('tr.parent').addClass('Expand').append('<td>+</td>');

            $('tr.parent').css("cursor", "pointer").attr("title", "Click to expand/collapse").click(function () {
                $(this).hasClass('Expand') ? $(this).removeClass('Expand').addClass('Compress').find('td:last').text('-') : $(this).removeClass('Compress').addClass('Expand').find('td:last').text('+');
                $(this).siblings('.child-' + this.id).toggle();
            });

            $('tr[class^=child-]').hide();
        });

Answer 5

これが実際の例ですhttp://jsfiddle.net/NE4rK/