<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.
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
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>
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
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>