help w/ appending nodes

irixdude · Apr 29, 2008

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','seven');
var Count = 7;
tabBody=document.getElementsByTagName("TBODY").item(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);
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>

RobG · Apr 30, 2008

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','seven');

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").item(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:

}
cell = document.createElement("TD");

Consider using:

row.insertCell(-1);

textnode=document.createTextNode(List);
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;
}
}}

Click to expand...

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));
++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).

Only one table shows up with the information	2	Mar 29, 2023
Dynamically Generated table does not apply styles	15	Aug 8, 2007
dynamically adding a row to a table (portability issue)	7	Dec 15, 2009
I want to Display Excel As HTML In js	2	Feb 24, 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
Help with my responsive home page	2	Dec 14, 2022
Sort by number of characters	1	Nov 2, 2023
How to have two html audio players on one page?	0	May 3, 2022

help w/ appending nodes

irixdude

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads