Question

I need to know how to relate several rows in a table together. I’ll try my best to explain.

We have a page where the client enters a list of products, description and specifications in a table. This page is managed by a CMS similar to a Rich Text editor. The layout will be something like this.

<h1>Toyota - TR - H1</h1>
<h2>Toyota Landcruiser - TR - H2</h2>
<h3>Toyota Landcruiser Tray - TR - H3  Description(td2) specifications(td3)</h3>

TR – Table Row
TD – Table Column

Now, H1 is the company name, H2 is the section and H3 is the actual product. There will be many products under a section and there can be many sections under a Company and there will be multiple Companies. The client will not be able to add classes or id’s. They will just create a new row in an existing table and will dump data. I have to load content from this file in to the main site. How do i relate all the products(H3) to its parent section(H2) and parent Company(H1)? Cannot use RegEx as there is no guarantee that the product name will be prefixed with company name. The final result should be something like below. I asked the client to use H1, H2, H3 to distinguish between products, sections and company.

http://imageupload.org/?d=3E55009E1

Answer 1

Try using jQuery’s nextUntil.

Description: Get all following siblings of each element up to but not
including the element matched by the selector, DOM node, or jQuery
object passed.

http://jsfiddle.net/WF4mt/2/

//first add a class to each row containing an h1 tag so that
//we can identify blocks of rows
$('h1').each( function(index) {
    //add a class to each h1 tag
    $(this).closest('tr').addClass('h1row');
});

//then for each h1 row find subsequent rows that are 'children'
$('tr.h1row').each( function(index) {
    var rows = $(this).nextUntil('tr.h1row');
    rows.addClass('y' + index);
});