CODEWITHSUNDEEP
javascriptjquerycss
Chankey Pathak
Chankey Pathak

Reputation: 21676

Expand and collapse in table row

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:

enter image description here

Desired table:

enter image description here

Upvotes: 0

Views: 2969

Answers (2)

Minister
Minister

Reputation: 1238

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/

Upvotes: 2

Atal Shrivastava
Atal Shrivastava

Reputation: 702

Add a div in your td which is hidden onload and display it on click event

Upvotes: 0

Related Questions