Re: help w/ appending nodes
- From: RobG <rgqld@xxxxxxxxxxxx>
- Date: Tue, 29 Apr 2008 16:28:37 -0700 (PDT)
On Apr 30, 8:02 am, irixd...@xxxxxxxxx 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','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:
<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
.
- References:
- help w/ appending nodes
- From: irixdude
- help w/ appending nodes
- Prev by Date: Re: Class not defined
- Next by Date: Re: Class not defined
- Previous by thread: help w/ appending nodes
- Next by thread: Re: IE is driving me crazy
- Index(es):
Relevant Pages
|
