Table containing Javascript to build cells

P E Schoen · Jan 12, 2011

I have a table which is filled with name, title, email, and phone numbers.
To make it easier to maintain I create a script which adds the rows and
items from an array. It works fine but according to the HTML 4.01
transitional validator the script is not allowed there.

<div align="center"><h1 style="font-size:
12pt;">Contacts</h1></div>
<table cellpadding="2" cellspacing="2" border="2"
style="text-align: left; width: 342px; ">
<tbody>
<tr>
<td width="231" style="vertical-align: top;"><b>Name</b>
</td>
<td width="89" style="vertical-align: top;"><b>Phone
Number</b><br>
</td>
</tr>
<script language="JavaScript" src="contacts.js"
type="text/javascript"> </script>
</tbody>
</table>

The script is:

var contact = new Array();

contact[0] = ["Name0", "Title0", "mailto:[email protected]",
"000-555-5555"];
...
contact[17]

for (i=0; i<=17; i++) {
document.write( "<tr><td ><p><b>" + contact[0] + "</b><Br>\n");
document.write( contact[1] + "<br>\n");
document.write( "<a href='" + contact[2] + "'>Email</a></td>\n");
document.write( "<td style='vertical-align: top;'><br>\n");
document.write( contact[3] + "<br> </td> </tr>\n");
}

I can probably construct the entire table with the script. I did not see any
information about script not allowed within a table. I referred to
http://www.w3.org/TR/html4/interact/scripts.html

Thanks,

Paul

dorayme · Jan 12, 2011

"P E Schoen said:
I have a table which is filled with name, title, email, and phone numbers.
To make it easier to maintain I create a script which adds the rows and
items from an array. It works fine but according to the HTML 4.01
transitional validator the script is not allowed there.

<div align="center"><h1 style="font-size:
12pt;">Contacts</h1></div>
<table cellpadding="2" cellspacing="2" border="2"
style="text-align: left; width: 342px; ">
<tbody>
<tr>
<td width="231" style="vertical-align: top;"><b>Name</b>
</td>
<td width="89" style="vertical-align: top;"><b>Phone
Number</b><br>
</td>
</tr>
<script language="JavaScript" src="contacts.js"
type="text/javascript"> </script>
</tbody>
</table>

Why not move it, if not to the head of the document, you could
put it in one of the cells.

What is the point of the div surrounding the heading? Why not
style the heading directly since you are already applying a style
to it.

And is there any point in using transitional rather then strict?
Best to use em for font units, pts are more suited to print
material.

If you specify element widths in px, either it will be ignored,
or else large size user text will spill out. In the case of
tables, you are safe!

Jukka K. Korpela · Jan 12, 2011

P said:
I have a table which is filled with name, title, email, and phone
numbers. To make it easier to maintain I create a script which adds
the rows and items from an array.

Such things are usually better done with server-side scripting than with
client-side JavaScript.

</tr>
<script language="JavaScript" src="contacts.js"
type="text/javascript"> </script>
</tbody>
</table>

You have placed the <script> element between the </tr> and </tbody> tags.
That's not allowed, since it would make the <script> a child of <tbody>, and
a <tbody> cannot have any other children but <tr> elements.

Usually you could either move the <script> element at the end of the last
<td> element or, better, after the <table> element. Depending on the
scripting logic, it might be best to move the <script> element even to the
<head> part of the document (usually the "cleanest" place for <script>
elements that contain variables and functions only) or at the very end of
the body, right before the </body> tag.

But, again, depending on scripting logic, you might need to do something
else.

The script is:

var contact = new Array();

contact[0] = ["Name0", "Title0", "mailto:[email protected]",
"000-555-5555"];

As an aside, the address is wrong, since the domain .null does not currently
exist. To indicate that an address-looking construct is just a dummy
example, use the .example or .example.com pseudo-domain. To use an
address-looking construct that detectable as invalid (e.g. for use as an
initial value that is expected to be overridden), use the .invalid
pseudo-domain.

document.write( "<tr><td ><p><b>" + contact[0] +

Here we go... using document.write() makes the <script> non-movable - this
is one of the many reasons for avoiding document.write().

With the current logic, there's not much to be done except accept
non-validity. It's after all a syntactic matter only, though it is
imagenable that some future browser might discard a <script> element that
appears in a place where the syntax does not allow it - though this is
highly unlikely.

A better logic would be to create the new elements using createElement() and
add them to the DOM tree with appendChild(). That way, the <script> element
could be placed at the end of the document. (It can't be in <head> because
it needs to access an existing element to find a place where it adds the
elements, and for this, you need to ensure that the document has loaded
before the script starts running.)

I can probably construct the entire table with the script.

Click to expand...

Certainly. And this would another way to fix the problem.

I did not
see any information about script not allowed within a table. I
referred to http://www.w3.org/TR/html4/interact/scripts.html

Click to expand...

It's not there, because the recommendation specifies what the allowed
content of an element is, and such rules only implicitly defined the allowed
contexts of an element (i.e. where an element may appear). The
www.htmlhelp.com site contains a nice HTML 4 reference where the context
rules have been explicitly written out, see e.g.
http://www.htmlhelp.com/reference/html40/special/script.html

P E Schoen · Jan 12, 2011

"Jukka K. Korpela" wrote in message

P E Schoen wrote:

Such things are usually better done with server-side scripting than
with client-side JavaScript.

You have placed the <script> element between the </tr> and </tbody>
tags. That's not allowed, since it would make the <script> a child of
<tbody>, and a <tbody> cannot have any other children but <tr>
elements.

Using the http://www.htmlhelp.com/reference/html40/special/script.html it
seems that script can be placed within any block elements. I tried
commenting out the <tbody> tags and I also tried a <div> block around the
script but failed validation. I tried commenting the script and it does not
run.

These also seem useful: http://www.html-tags-guide.com/html-tbody-tag.html
http://javascript.about.com/library/blheadbody.htm

[snip]

The script is:

var contact = new Array();

contact[0] = ["Name0", "Title0", "mailto:[email protected]",
"000-555-5555"];

Click to expand...

As an aside, the address is wrong, since the domain .null does
not currently exist. To indicate that an address-looking construct
is just a dummy example, use the .example or .example.com
pseudo-domain. To use an address-looking construct that detectable
as invalid (e.g. for use as an initial value that is expected to be
overridden), use the .invalid pseudo-domain.

Yes, I just replaced actual data with dummies for this post.

document.write( "<tr><td ><p><b>" + contact[0] +

Click to expand...

Here we go... using document.write() makes the <script>
non-movable - this is one of the many reasons for avoiding
document.write().

Click to expand...

With the current logic, there's not much to be done except
accept non-validity.

Click to expand...

A better logic would be to create the new elements using
createElement() and add them to the DOM tree with
appendChild(). That way, the <script> element could be
placed at the end of the document. (It can't be in <head>
because it needs to access an existing element to find a
place where it adds the elements, and for this, you need
to ensure that the document has loaded before the script starts running.)

Click to expand...

Maybe something like this:
http://www.webmasterworld.com/javascript/3068770.htm

Certainly. And this would another way to fix the problem.

Click to expand...

That probably makes most sense. It would encapsulate the entire table in a
single script.

Although it might be better to ask in a separate thread or on AWW, what I am
trying to do is build a new website for the local Sierras Club group. The
original style was: http://maryland.sierraclub.org/baltimore.

I have been working on this as a replacement:
http://www.pauleschoen.com/SierraClubBaltimore/indexnew.shtml

It is modeled after another local website:
http://maryland.sierraclub.org/Western-MD and it as well as several other
local sites are modeled on the Maryland Chapter website:
http://maryland.sierraclub.org.

But many people in our group like this one:
http://maryland.sierraclub.org/Montgomery. It does look slick, and it is
also one of the few that actually pass validation. But I think the one I
chose will be easier (for me) to maintain, and it may not involve copyright
issues. I am also trying to set up a system where members can submit
content. I have a form on the websites that uses a perl script and SQLite.

The Excom may be willing to hire a professional website designer for several
thousand dollars to make a very attractive site that hopefully will draw
more people to use it. But I have a hit counter on my site and it has
averaged only 10 per day, most of which have been my own accesses and search
engines and such. So the question is, "If we build it, will they come?" I'd
rather have them spend the money for other projects, and I'm doing this as a
volunteer. But I'm not a website professional and I have only been dabbling
with HTML, Javascript, and CGI. So, if anyone is interested in tackling this
project, let me know, and we might be able to use your services either as a
tax-deductible donation, or for hire.

Thanks,

Paul
www.pstech-inc.com

Jukka K. Korpela · Jan 12, 2011

P said:
Using the
http://www.htmlhelp.com/reference/html40/special/script.html it seems
that script can be placed within any block elements.

Yes. Which elements are block elements?

I tried commenting out the <tbody> tags

Why did you expect that to help?

and I also tried a <div> block around
the script but failed validation.

Why did you expect that to help? In a context where only <tr> elements are

allowed said:
These also seem useful:
http://www.html-tags-guide.com/html-tbody-tag.html
http://javascript.about.com/library/blheadbody.htm

Ummm... did they actually help you?

Yes, I just replaced actual data with dummies for this post.

No, as I wrote, .null is wrong even for dummy data.

Maybe something like this:
http://www.webmasterworld.com/javascript/3068770.htm

Maybe what? URLing is like burping, just more annoying.

Sorry, I lost my interest in the problem, even without seeing what the real
problem was.

Jukka K. Korpela · Jan 17, 2011

Ben said:
Can't you put the script in the <head> but write it like this:

function main()
{
// do everything ...
}

window.onload = main;

That's how I usually do it. The script only runs once all the document
is there.

Yes, that's a feasible approach too. Putting the script at the end of <body>
just sounds a bit more natural to me - the document then starts with the
document proper (content with HTML markup) and ends with associated script
code that is supposed to operate on the document.

It would actually make sense to put any <style> elements at the end as well.
But although this works on most browsers, it violates formal HTML syntax,
and it also generates "flash of unstyled content" for obvious reasons.

Both scripts and stylesheets are usually best placed in external files and
just referenced in the HTML document. It may appear to be simpler (and more
efficient) to embed them, especially if they are very short, but very often
the amount of code grows unexpectedly and you find yourself with gross
amounts of embedded code.

Eric Bednarz · Jan 27, 2011

Jukka K. Korpela said:
[â€¦] Putting the script at the end of
<body> just sounds a bit more natural to me - the document then starts
with the document proper (content with HTML markup) and ends with
associated script code that is supposed to operate on the document.

The problem with this approach is that you donâ€™t really know if all host
object properties already have the values (yet) that you want.
E.g. WebKit-based browsers can have problems to retrieve correct
horizontal offset(Width|Left) values of element nodes that are already
accessible in the DOM; this appears to depend on race conditions and is
a bitch to debug (network latency can do a very good job hiding this).

How to wrap <td> content .	16	Sep 28, 2023
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Need help with <rowspan> in an HTML table	1	Nov 6, 2024
Javascript DOM	1	Mar 29, 2023
Only one table shows up with the information	2	Mar 29, 2023
Nested Loop Insert Page Break	1	Nov 5, 2021
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Sort by number of characters	1	Nov 2, 2023

Table containing Javascript to build cells

P E Schoen

dorayme

Jukka K. Korpela

P E Schoen

Jukka K. Korpela

Jukka K. Korpela

Eric Bednarz

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads