By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,483 Members | 1,063 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,483 IT Pros & Developers. It's quick & easy.

help w/ appending nodes

P: n/a
I am trying to create a script to enter the values of an array into a
dynamically generated table 3 columns wide. I have a counter for the
row # that I am using to name/id the row TR node so I an attach 3
cells (3 columns) before attaching the full row to the table. I'm not
sure where the problem is, but in its current form my script doesn't
even generate the first node before stopping with an error. Please let
me know what I'm doing wrong.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function startup()
{
colcount = 0;
rowcount = 0;
var List = new
Array('one','two','three','four','five','six','sev en');
var Count = 7;
tabBody=document.getElementsByTagName("TBODY").ite m(0);
for (var i = 0; i<Count; i++)
{
if (colcount == 0)
{
var row=document.createElement("TR");
rowcount++;
row.id = rowcount;
}
cell = document.createElement("TD");
textnode=document.createTextNode(List[i]);
cell.appendChild(textnode);
document.getElementById(rowcount).appendChild(cell );
colcount++;
if (colcount == 3)
{
tabBody.appendChild(row);
colcount = 0;
}
}
}
</script>
</head>
<body onload="startup()">
<table border='1' id='mytable'>
<tbody>
</tbody>
</table>
</body>
</html>
Jun 27 '08 #1
Share this Question
Share on Google+
1 Reply


P: n/a
On Apr 30, 8:02 am, irixd...@gmail.com wrote:
I am trying to create a script to enter the values of an array into a
dynamically generated table 3 columns wide. I have a counter for the
row # that I am using to name/id the row TR node so I an attach 3
cells (3 columns) before attaching the full row to the table. I'm not
sure where the problem is, but in its current form my script doesn't
even generate the first node before stopping with an error. Please let
me know what I'm doing wrong.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function startup()
{
colcount = 0;
rowcount = 0;
If you intend these to be global variables, better to declare them
with var outside the function to show that is the clear intent.

var List = new
Array('one','two','three','four','five','six','sev en');
Variables starting with a capital letter are normally reserved for
constructors (just a convention, but good to follow). Also,
initialisers are considered better practice:

var list = ['one','two','three','four','five','six','seven'];

var Count = 7;
tabBody=document.getElementsByTagName("TBODY").ite m(0);
Why is tabBody global? You could also use:

var tabBody=document.getElementsByTagName("TBODY")[0];

for (var i = 0; i<Count; i++)
{
if (colcount == 0)
{
var row=document.createElement("TR");
You can also use the more convenient insertRow:

row = tabBody.insertRow(-1);

which creates the row and inserts it in one statement.

rowcount++;
row.id = rowcount;
Though usually tolerated, an ID attribute starting with a number is
invalid:

<URL: http://www.w3.org/TR/html4/types.html#type-name >

}
cell = document.createElement("TD");
Consider using:

row.insertCell(-1);

textnode=document.createTextNode(List[i]);
cell.appendChild(textnode);
document.getElementById(rowcount).appendChild(cell );
Firebug gives the following error:

document.getElementById(rowcount) has no properties

because the element with the id rowcount hasn't been added to the
document yet. But the expression isn't needed anyway since you
already have a reference to that element as "row".

row.appendChild(cell);

colcount++;
if (colcount == 3)
{
tabBody.appendChild(row);
colcount = 0;
}
}}
Consider something like:

function startup() {
var cell, row;
var colcount = 0;
var list = ['one','two','three','four','five','six','seven'];
var tBody = document.getElementsByTagName("TBODY")[0];

for (var i=0, len=list.length; i<len; i++) {
if (!(colcount%3)) {
row = tBody.insertRow(-1);
}
cell = row.insertCell(-1);
cell.appendChild(document.createTextNode(list[i]));
++colcount;
}
}
A bit of feature detection and defensive programming would be good too
(e.g test that document.getElementsByTagName is supported and that
document.getElementsByTagName("TBODY") returns something before
attempting to access its properties).
--
Rob
Jun 27 '08 #2

This discussion thread is closed

Replies have been disabled for this discussion.