I need help with modifying a dynamically generated table to meet specific requirements. The table currently looks like this.
The task involves hiding all columns related to Category B, eliminating duplicate rows for Category A, and displaying entries from Category B in an expand-collapse format. Each A1 Name cell should have an expand button that, when clicked, reveals the corresponding entries of Category B below.
I have successfully hidden the B category and removed duplicate rows using the following code:
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();
Here is the current Fiddle link for reference: http://jsfiddle.net/ME3kG/3/
However, I am facing issues with implementing the expand-collapse functionality. Can anyone provide guidance on how to populate the B category's row data in this manner? Any insights would be greatly appreciated. Thank you.
Current table:
Desired table: