在表格行中展开和折叠

Question

I have a table which is being generated from server side and it looks like this .

Now the requirement is to hide all the column of Category B, remove duplicate rows for Category A and show entries of corresponding entries of Category B in expand-collapse way. Each A1 Name Column cell will have a expand button and when it is clicked the entries of B columns of that row will be shown below that.

I'm able to hide B category and remove duplicate rows by

var hide_duplicate_row = function () {
            var seen = {};
            $('td:nth-child(2)').each(function () {
                var txt = $(this).text();
                if (seen[txt])
                    $(this).closest('tr').hide();
                else
                    seen[txt] = true;
            });
        };


var show_only_head = function(){
$('td:nth-child(4),th:nth-child(4)').hide();
$('td:nth-child(3),th:nth-child(3)').hide();
}

hide_duplicate_row();
show_only_head();

Fiddle: http://jsfiddle.net/ME3kG/3/

but I'm stuck with the expand collapse part, how do I populate the B category's row data in this way? Any input on this will be appreciated, thanks.

Full table:

Desired table:

Answer 1

Here is the plan for this:

Goes through the table rows one by one:

$('table tr').each(function () {

On each row get the content you need:

var cell_3 = $("td:nth-child(3)", this).html(); // a3
var cell_4 = $("td:nth-child(4)", this).html(); // a4

While you are still processing the current row modify the A1 column like this:

$( "td:nth-child(1)", this ).append( '<div class="toggle">' + cell_3 + ' - ' + cell_4 + '</div>' );

Now you should have a newly generated DIV in each A1 column. You'll need to assign a toggle functionality on 'click' event and you should be done. The END.

It seems you are developing using jQuery and this is the reason to explain you the idea, not giving you the exact code. :-)

EDIT 1 :

Here is the final code, according to the few specific requirements: http://jsfiddle.net/ME3kG/26/ and some formatting: http://jsfiddle.net/ME3kG/30/

Answer 2

在你的td中添加一个隐藏onload的div并在click事件中显示它