template

[Lee]

Hi,
I am using a simple Ajax script to access a template file that consists
of this:

<tr>
<td>{var1}</td>
<td>{var2}</td>

<td>
<table>
<tr>
<td>Name: {name3}</td>
<td>Age: {age3}</td>
</tr>
</table>
</td>

</tr>

I want to use it to add another row to a table, but I understand that I
should be using insertRow and insertCol methods instead of just using
table.innerHTML.
Is there a good way to extract the tags so that I can use these
methods? Or even just a way to put these tags into a multidimensional
array? I couldn't find any such libraries to do this, but I'm pretty
sure I'm going to have to use regular expressions.

[Randy Webb]

Lee said the following on 11/19/2006 3:35 PM:

It would be a lot easier if you simply redesigned your template file to
return simple data. But, if that is not a possibility, then you could
strip out all the HTML tags except the <td> tags. Remove all white space
between tags, then remove double <td> tags. Then split it on <td> and
read the resulting array.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Danny]

Well, the easy answer to your query is, using the DOM method for it, which is
YOUROBJ.getElementsByTagName('td'); which returns a collection of all mentioned
element as argument, in this case, all possible TD elements children of YOUROBJ
node. Once that is collected, you can get their data, stick it in a
multidimensional array, with their respective info/objects/data per
loop/iteration for each member. You could take a peek at
http://rick.measham.id.au/paste/tableSort.htm which uses pretty much That, in
order to use .sort() native method of array objects, over table data once bound
in a multidimensional array, and then puts it back.

Danny

[Randy Webb]

Danny said the following on 11/19/2006 9:27 PM:

> Well, the easy answer to your query is, using the DOM method for it, which is
> YOUROBJ.getElementsByTagName('td'); which returns a collection of all mentioned
> element as argument, in this case, all possible TD elements children of YOUROBJ
> node.

True.

> Once that is collected, you can get their data, stick it in a
> multidimensional array, with their respective info/objects/data per
> loop/iteration for each member.

False. Look at the code again. It has nested TD elements so your data
won't always be what you wanted it to be.

<snip>

[RobG]

Lee wrote:
> Hi,
> I am using a simple Ajax script to access a template file that consists
> of this:
>
> <tr>
> <td>{var1}</td>
> <td>{var2}</td>
>
> <td>
> <table>
> <tr>
> <td>Name: {name3}</td>
> <td>Age: {age3}</td>
> </tr>
> </table>
> </td>
>
> </tr>
>
> I want to use it to add another row to a table, but I understand that I
> should be using insertRow and insertCol methods instead of just using
> table.innerHTML.

If your returned text is JSON text, say:

{
var1 : 'some value',
var2 : 'some other value',
name3 : 'a name',
age3 : 'age for name 3'
}

And your template is as specified, then you can use
getElementsByTagName to get the TDs, then loop through them. Where the
content matches an object property, insert the value, something like:

var oRow = rowTemplate.cloneNode(true);
var cell, cells = oRow.getElementsByTagName('td');
var cellContent;
var obj = eval('(' + jsonText + ')');
for (var i=0, len=cells.length; i<len; i++){
cell = cells[i];
if (/{[^}]+}/.test(cell.innerHTML)){
cellContent = cell.innerHTML.replace(/[{}\s]/g,'');
if (cellContent in obj){
cell.innerHTML = obj[cellContent];
}
}
}

Completely untested, it's just to give you an idea. Once you've got
your modified row, you must append it to a tbody element to keep IE
happy. If you already have a table and only have one tbody, then:

var tbody = tableRef.getElementsByTagName('tbody')[0];
tbody.appendChild(oRow);

> Is there a good way to extract the tags so that I can use these
> methods? Or even just a way to put these tags into a multidimensional
> array? I couldn't find any such libraries to do this, but I'm pretty
> sure I'm going to have to use regular expressions.

Don't try to use innerHTML to replace part of a table, use it only
replace either the entire table or the content of a cell. Using
innerHTML and a regular expression means you will have to use a replace
for every property you want to replace, which means parsing the entire
string every time. It may get very slow as the template gets bigger.

--
Rob

[Lee]

Thanks!
The reason I need a template file is for php and for javascript to be
able to read from the same source, and so I need this format or
something very similar.

I'm almost there. When I get that template file into a string, how do
I change it to a row element? I'm not quite sure how you went from
reading in a template string to creating an object.
Also, I don't think JSON will be the best way to go because I want to
add in the new row exactly as I have it in the template. I can do the
substitutions with regex like you described, thanks!

I tried to make this hidden table and change its innerHTML to my
template but IE complained about that.

<table style='display:none' id='hiddenTable'></table>

[Lee]

Oh nevermind, I see why you used JSON. I have the template's variables
working fine. I almost have the same method for how to substitute the
template, and it works fine.

[Lee]

I still don't see how to get the template string into an object
though...