problems using non-table tags in table.

[t.nicolson]

Hi there.

I'm basically trying to expand a form within a table dynamically.

To this end i've declared a placeholder within my table which i want to
fill out using a javascript.

eg.
<div id=some_section_of_my_page>

<table>
....some rows...
<div id=placeholder></div>
</table>

</div>

When I look at the page source, all is well. However, when I get my
javascript to get the innerHTML of some_section_of_my_page, I see
something like this.

<div id=placeholder></div>
<table>
....some rows...
</table>

unhelpfully moving my placeholder outside of the table.

This works on IE but fails with Firefox/Mozilla.

Any ideas? work arounds? Is this a problem with the DOM or the
function innerHTML?

Thanks in advance.

Tim

[Michael Winter]

On 6 Dec 2004 08:11:15 -0800, <t.********@signal.qinetiq.com> wrote:

[snip]

<table>
...some rows...
<div id=placeholder></div>
</table>
[snip]
Any ideas? work arounds? Is this a problem with the DOM or the
function innerHTML?

Neither. It's a problem with your mark-up: it's invalid. The contents of
certain elements are restricted to a specific subset. For example, lists
(OL/UL) may only contain items (LI), and SELECT elements may only contain
OPTION and OPTGROUP elements. The same is true for TABLEs.

The valid elements are defined in the DTD that you're using with your
document. For instance,
<URL:http://www.w3.org/TR/html4/struct/tables.html#h-11.2.1>. Notice the
line

<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

The elements in brackets show what a TABLE may contain as its immediate
children. The comma separation means, "in this order". So, an optional
CAPTION (denoted by ?), followed by either zero or more COL elements, or
zero or more COLGROUP elements, followed by an optional THEAD, followed by
an optional TFOOT, followed by at least one TBODY.

If you managed to follow that, you're probably wondering: "Well, what
about TR? Can't I include them directly? Most people do." The answer to
that is yes. If you don't explictly add a TBODY element, the browser will
do it for you.

So what does that all mean? The TBODY element - usually used to group rows
- will probably suffice for your placeholder. Your existing HTML will
become

<table>
<tbody>
<!-- original set of rows -->
</tbody>

<tbody id="placeholder">
<!-- your placeholder -->
</tbody>
</table>

This type of thing is why this group constant recommends that HTML should
be validated (use <URL:http://validator.w3.org/>) before it is scripted.
Invalid HTML can lead to unexpected behaviour, just as you've found here.

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Ivo]

<t.********@signal.qinetiq.com> asks

I'm basically trying to expand a form within a table dynamically.

To this end i've declared a placeholder within my table which i want to
fill out using a javascript.

eg.
<div id=some_section_of_my_page>

<table>
...some rows...
<div id=placeholder></div>
</table>

</div>

When I look at the page source, all is well. However, when I get my
javascript to get the innerHTML of some_section_of_my_page, I see
something like this.

<div id=placeholder></div>
<table>
...some rows...
</table>

Tables can only contain THEAD, TBODY, TFOOT and TR elements (in fact, only
the first three: if the browser finds only TR elements, a TBODY is
automaticaly created). And TR elements can only contain TD elements. Inside
such TD element freedom is regained and you can place virtually any element
you wish, including whole new tables.

I would think that in your current situation, replacing the placeholder DIV
with a placeholder TD (inside a proper TR) solves the problem.

--
Ivo

[t.nicolson]

Yes, thankyou, sorry to waste your time. Was just difficult to know
what to search for!

Thanks again.

Tim

[t.nicolson]

Yes, thankyou, sorry to waste your time. Was just difficult to know
what to search for!

Thanks again.

Tim

[t.nicolson]

Yes, thankyou, sorry to waste your time. Was just difficult to know
what to search for!

Thanks again.

Tim

[RobG]

Ivo wrote:
[...]

I would think that in your current situation, replacing the placeholder DIV
with a placeholder TD (inside a proper TR) solves the problem.

Depending on what the OP is trying to add to the table. If it is just
adding form elements (or entire tables) inside TDs using innerHTML,
then do what Ivo says.

However, it may also be useful to create entire rows, in which case
using DOM createElement methods would be best and the placeholder id
might be best on a row.

Just a suggestion. ;-)

--
Rob