Rendering a table template from a populated/existing table

[uksp...@gmail.com]

Hi,

I have some HTML being served server side, and I am looking at adding the ability to re-use certain elements of it again with Pure, however I am having problems using a template from a <table> that already has populated rows.

So, initial page loads a table with say, 3 populated rows, I then want to use one of these rows as my template in order to update the table when a table row is added or deleted via an ajax request. If I try using a directive such as:

    var directive = {

        'tbody tr': { 

            'Condition<-': {

                '.operator': 'operator',

                '.value': 'value'

            }

        }

    };

Then I'm getting all sorts of weirdness because the tbody tr is matching 3 rows and I think it's getting confused. I can't seem to find any examples of code that reuses existing populated HTML as a template source. Is this possible because the initial page load is essentially including the 'template', I don't want to include a blank html template stub just to be able to render the rows when required, when the same html, (just with some populated data) already exists in the DOM to use as a template.

Thanks.

[Mic (BeeBole)]

If you target CSS 2.1 compatible browsers (>= IE8) you can use the pseudo selector :first-child, to select only the first TR.

eg: 'tbody tr:first-child'

If not. You can use a class, that you leave only to the first TR. 

So you can select it later by this class.