/    Sign up×
Community /Pin to ProfileBookmark

DOM – elements inside table but outside tr?

Copy linkTweet thisAlerts:
Oct 13.2006

Is it possible to have any sort of element inside a DOM Table element that isn’t thead or tbody? What I want to do is generate (server-side) a table that has several divs:

[code=html]<table>
<div class=”row”>
<tr><td>….</td></tr>
</div>
<div class=”row”>
<tr><td>…</td></tr>
</div>[/code]

etc. The reason I want to do this is so I can more easily remove rows or add new ones (by cloning them). I can’t look at the TR element itself because the data may or may not actually be in a table! However, whenever I place a <div> or <span> before a <tr>, they seem to be shifted *above* the table. Even innerHTML doesn’t work. Is there any way at all to append any sort of element *between* the table and tr tags?

Thanks!

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@UltimaterOct 13.2006 — Invalid markup.

I suggest you take the following route:
<i>
</i>&lt;table id="mytable"&gt;
&lt;tbody&gt;
&lt;tr&gt;&lt;td&gt;....&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;...&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;

<i>
</i>&lt;style type="text/css"&gt;
table#mytable tr{
/* row class goes here*/
}
table#mytable tr td{
/* datacell class goes here*/
}
&lt;/style&gt;


As far as removing and adding rows, there is no reason for extra DIVs because JavaScript's DOM methods are sufficient enough to manipulate the page as long as you are using valid markup.


HTML does not allow you to append an element where it does not belong.


Comments however can be placed between any two elements.
Copy linkTweet thisAlerts:
@CidolfasauthorOct 13.2006 — Thanks for your reply. Unfortunately I can't use it. What I'm doing is extremely generalizable - the content between the generated DIVs can be a table row, a plain old paragraph, or anything in between, and the code before and after can similarly be inside a table or anywhere else. I was just wondering if there was any element at all that could possibly go there.
Copy linkTweet thisAlerts:
@konithomimoOct 13.2006 — Is it possible to have any sort of element inside a DOM Table element that isn't thead or tbody? What I want to do is generate (server-side) a table that has several divs:

[code=html]<table>
<div class="row">
<tr><td>....</td></tr>
</div>
<div class="row">
<tr><td>...</td></tr>
</div>[/code]

etc. The reason I want to do this is so I can more easily remove rows or add new ones (by cloning them). I can't look at the TR element itself because the data may or may not actually be in a table! However, whenever I place a <div> or <span> before a <tr>, they seem to be shifted *above* the table. Even innerHTML doesn't work. Is there any way at all to append any sort of element *between* the table and tr tags?

Thanks![/QUOTE]

You cannot put any type of object like that outside of a TR. If you want to be able to clone/remove/add rows, simply use a function that takes the table, gets its rows and then acts however you want it to. It would be the same as placing a div on the outside of each TR.
Copy linkTweet thisAlerts:
@KorOct 14.2006 — you may use several tbodies to split the rows.
<i>
</i>&lt;table&gt;
&lt;tbody&gt;
&lt;tr&gt;&lt;td&gt;....&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;....&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;....&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tbody&gt;
&lt;tr&gt;&lt;td&gt;...&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;...&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;


... and use the tbody's index in a getElementsByTagName() collection to refere the splited groups.
Copy linkTweet thisAlerts:
@CidolfasauthorOct 16.2006 — Thanks for the tips. Unfortunately none of them will work, as the application is too generalized to be able to control what goes before or after the SPAN I mentioned. It looks like I'll have to alter the table programmatically before outputting it. X-X Thanks anyway.
Copy linkTweet thisAlerts:
@felgallOct 16.2006 — The only things that are allowed inside a <table> and outside of a <tr> apart from <thead> and <tbody> are <tfoot> and <caption>.

With what those tags mean there is absolutely no reason whatsoever why there could be any possible need for any other tags in between those if the tags are being used correctly to define tabular data. That you want to create invalid markup is an indication that what you are doing is 101% certain not to all belong in a single table in the first place.
Copy linkTweet thisAlerts:
@CidolfasauthorOct 16.2006 — That's exactly my point, yes. That's what I mean by being excessively generalizable. Essentially I want to treat a block of code as something "repeatable"; this block can be a table row, a table cell, or regular text. It looks like I'll just have to detect the case where it's a row or cell and deal with them separately.
×

Success!

Help @Cidolfas spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...