NEED to use a string to create a table, and innerHTML does not work.

[wk]

i have a <table></table> ...and the have a string with the html that
will create the table rows, columsn etc....perhaps <tr><td>a
row</td></tr>.


this string comes dynamically from a source and can vary immensly.

How can i use javascript to build the table from this string? I
understand i cannot use innerHTML in a table

 

[kaeli]

i have a <table></table> ...and the have a string with the html that
will create the table rows, columsn etc....perhaps <tr><td>a
row</td></tr>.


this string comes dynamically from a source

What source?
Why are you getting a whole big string at one time?

and can vary immensly.

What's so variable about table rows?

--
--
~kaeli~
A midget fortune teller who escapes from prison is a small
medium at large.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[Matt Kruse]

How can i use javascript to build the table from this string? I
understand i cannot use innerHTML in a table

Not in IE, at least. Maybe true for other browsers also.

Instead, use outerHTML.

1. Build your innerHTML content.
2. Get the outerHTML of the table you want to populate
3. parse out the <table> tag
4. Add it to the beginning of your innerHTML, and append a </table> at the
end
5. replace the table's outerHTML with your new content

That's a solution, although there might be a better, more
standards-compliant way of achieving your goal.

 

[Craig Keightley]

You can use a <div> tag in a empty cell and draw your table in there:

eg
HTML
<table><tr><td><div id="myDiv"></div></td></tr></table>

in your javascript:
function myFunction{
var t = '<table>'
t += '<tr><td>my text</td><td>my text</td></tr>'
t += '<tr><td>my text</td><td>my text</td></tr>'
t += '<tr><td>my text</td><td>my text</td></tr>'
t += '<table>'
document.all.myDiv.innerHTML = t
}

hth
craig

 

[RobG]

i have a <table></table> ...and the have a string with the html that
will create the table rows, columsn etc....perhaps <tr><td>a
row</td></tr>.


this string comes dynamically from a source and can vary immensly.

How can i use javascript to build the table from this string? I
understand i cannot use innerHTML in a table

You can use innerHTML if you build the entire table with it. IE does
not support modifying existing tables with innerHTML, though you can
use it for cell content.

Otherwise I guess you are stuck with parsing the HTML and trying to
construct the table using DOM - not pretty I'd reckon, particularly
if there are rowspan or colspan attributes.

 

[RobG]

You can use a <div> tag in a empty cell and draw your table in there:

eg
HTML
<table><tr><td><div id="myDiv"></div></td></tr></table>

in your javascript:
function myFunction{
var t = '<table>'
t += '<tr><td>my text</td><td>my text</td></tr>'
t += '<tr><td>my text</td><td>my text</td></tr>'
t += '<tr><td>my text</td><td>my text</td></tr>'
t += '<table>'
document.all.myDiv.innerHTML = t
}

To remove dependency on MS proprietary document.all and write to the
document faster (joining an array is faster than concatenating a
string):

<script type="text/javascript">
function insertTable(loc){
var x;
if ( ( x = document.getElementById(loc) )
|| ( x = document.all[loc]) ) {
} else { return }

var t = [
'<table style="border: 1px solid red;',
'border-collapse: collapse;">',
'<tr><td>my text</td><td>my text</td></tr>',
'<tr><td>my text</td><td>my text</td></tr>',
'<tr><td>my text</td><td>my text</td></tr>',
'<table>' ]
x.innerHTML = t.join('');
}
</script>
<input type="button" value="Insert table" onclick="
insertTable('divA');
">
<div id="divA"></div>

 

[wk]

yeah, finally putting a div tag allowed me to use innerHTML to it.
thanks. I didnt need to concatinate, as the string is already a
comlpete piece of HTML when i receieve it.