0

テーブルに行を動的に追加しています。各行は、親行または子行のいずれかになります。親行をクリックしたときに子行の表示を切り替えたい。

if (response != null && response != "")
                            {
                                $(response).each(
                                        function()
                                        {
                                            if (this.name == "Opening Balance") // opening balance
                                            {
                                                $('#receipt_table').append(
                                                        '<tr class="accordion-toggle" data-toggle="collapse"><th><b>' + this.name
                                                                + '</b></td><th></th><th style="text-align:right"><b>' + this.amount
                                                                + '</b></th></tr>');
                                                receipt_total = this.amount;
                                            }
                                            else if (this.flagGSL == "O"  && this.flagPC=="P")
                                            {
                                                $('#receipt_table').append(
                                                        '<tr id="'+this.name+'" class="header" bgcolor = #ffff10><td>&nbsp;&nbsp;' + this.name + '</td><td style="text-align:right">'
                                                                + this.amount + '</td><td></td></tr>');
                                                var myEl = document.getElementById(this.name);

                                             myEl.addEventListener('click', function() {
                                                 alert('Clicked');
                                             }, false);

                                            }
                                            else if (this.flagGSL == "O"  && this.flagPC=="C")
                                                {  
                                                 $('#receipt_table').append(
                                                            '<tr class="child"><td>&nbsp;&nbsp;' + this.name + '</td><td style="text-align:right">'
                                                                    + this.amount + '</td><td></td></tr>');
                                                }
                                        });
                            }

上記のコードでは、親行はその名前と同じ ID を持ちます。その子は「子」としてクラスを持ちます。子行を切り替えることができる解決策を教えてください。

4

1 に答える 1

1

動的コンテンツとイベント ハンドラーを分離する必要があります。

if (response != null && response != "") {
    $(response).each(function () {
        if (this.name == "Opening Balance") // opening balance
        {
            $('#receipt_table').append(
                '<tr class="accordion-toggle" data-toggle="collapse"><th><b>' + this.name + '</b></td><th></th><th style="text-align:right"><b>' + this.amount + '</b></th></tr>');
            receipt_total = this.amount;
        } else if (this.flagGSL == "O" && this.flagPC == "P") {
            $('#receipt_table').append(
                '<tr id="' + this.name + '" class="header" bgcolor = #ffff10><td>&nbsp;&nbsp;' + this.name + '</td><td style="text-align:right">' + this.amount + '</td><td></td></tr>');
        } else if (this.flagGSL == "O" && this.flagPC == "C") {
            $('#receipt_table').append(
                '<tr class="child"><td>&nbsp;&nbsp;' + this.name + '</td><td style="text-align:right">' + this.amount + '</td><td></td></tr>');
        }
    });
}

次に、dom Ready ハンドラーで

jQuery(function () {
    $('#receipt_table').on('click', '.header', function () {
        $(this).nextUntil('.header', '.child').toggle()
    })
})
于 2013-10-26T06:01:51.390 に答える