Convert a table into an accordion (special case). Please help.
I've been wrestling with this for too long and am exasperated, please help if you can.
I'm working with a common CMS issue where a table presented. All rows contain two columns. Some rows should be headers as they contain H3 elements in the second column leaving the first column's only content a single non-breaking-space. The in-between rows contain labels in the first column and the second column contain input elements. So it looks a bit like:
table
tr
td - span - nbsp - /span - /td
td - h3 - text - h3 - /td
/tr
tr
td - span - label - text - /label - /span - /td
td - input - /td
/tr
tr
td - span - label - text - /label - /span - /td
td - input - /td
/tr
etc.
etc.
tr
td - span - nbsp - /span - /td
td - h3 - text - h3 - /td
/tr
tr
td - span - label - text - /label - /span - /td
td - input - /td
/tr
etc.
etc.
/table
I need to convert this ugly table to a structure suitable for jQueryUI accordion, and so far I have:
jQuery('table').after('<div id="accordion"></div>');
jQuery('td h3').each(function(i){
var heds = jQuery(this).parent().html();
jQuery('#accordion').append(heds);
});
jQuery('table').remove();
Now where I'm stuck is I need to get the contents of every row in-between and generate an unordered list (or any structure I can use) and place that between the h3s. My question is, how do I get only the rows between the rows that contain h3 and insert that content in the appropriate location?
I've tried many combinations of: var cont = jQuery(this).nextUntil('td h3').html();
with: jQuery('div#accordion h3').after(cont);
Yet, nothing seems produce the desired results only null.
Any advice is welcome.
Thanks in advance.