create a new row in a table

P

Peter Kirk

Hi there

can someone please help me with creating dynamic content in a table? For
example, see the below javascript and html - why is a new row not created in
the table when I click the button? (I am using Internet Explorer 6).

<html>
<head>
<title>TEST</title>
<script language="javascript">
function addField() {
alert( 'Add Field' );
my_div.innerHTML = my_div.innerHTML + "<tr><td>new row</td></tr>";
}
</script>
</head>

<body>
<table border="1">
<tr>
<td>
first row
</td>
</tr>

<div id="my_div"></div>

<tr>
<td>
<input type="button" value="click me"
onclick="javascript:addField()" >
</td>
</tr>
</table>
</body>
</html>

Thanks,
Peter
 
K

kaeli

"Peter Kirk" <peter> enlightened us said:
Hi there

can someone please help me with creating dynamic content in a table? For
example, see the below javascript and html - why is a new row not created in
the table when I click the button? (I am using Internet Explorer 6).
Click to expand...

Invalid HTML.

This is a horrible way to make dynamic tables, too.
</tr>

<div id="my_div"></div>
Click to expand...

A div is not allowed to be the child of TBODY.
TBODY has only TR as a child.
http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TBODY
<tr>
<td>
<input type="button" value="click me"
onclick="javascript:addField()" >
Click to expand...

onClick is already script. Drop the "javascript:" stuff from it.
onClick="addField()"

To make dynamic table rows, use createElement and appendChild.
Create the element, then append it to TBODY. Or use of the insert methods or
replace if you'd prefer that.

--
 
P

Peter

Hi, thanks for the response...

kaeli said:
Invalid HTML.

This is a horrible way to make dynamic tables, too.
Click to expand...

Quite likely.... I know zip about javascript, and almost zip about html....
A div is not allowed to be the child of TBODY.
Click to expand...

OK - that's what you mean by it being invalid - a DIV is not allowed inside
a TABLE? Don't really know what a "DIV" is, just thought it was a way to
create a label you could reference from other places in the html.

TBODY has only TR as a child.
http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TBODY
<!ELEMENT TBODY O O (TR)+ -- table body -->
Click to expand...

What is "TBODY" actually. Is it like TABLE?

onClick is already script. Drop the "javascript:" stuff from it.
onClick="addField()"

To make dynamic table rows, use createElement and appendChild.
Create the element, then append it to TBODY. Or use of the insert methods or
replace if you'd prefer that.
Click to expand...

OK thanks. I've got a place to start looking now.
Click to expand...
 
K

kaeli

Quite likely.... I know zip about javascript, and almost zip about html....
Click to expand...

Learn HTML first. You'll never code decent DHTML until you do.
OK - that's what you mean by it being invalid - a DIV is not allowed inside
a TABLE? Don't really know what a "DIV" is, just thought it was a way to
create a label you could reference from other places in the html.
Click to expand...

No, HTML is a structured layout language. It has elements. Elements have
attributes.
Documents have structure, and that structure is pre-determined to a point.
A DIV is a block-level element. As is P. SPAN is NOT a block-level element.
A table is a table, and as such, much have a certain structure. TBODY is part
of that and is implied if not explicitly stated.

This, in a nutshell, is the structure. (lots more elements are allowed, but
this is sufficient for now)

TABLE
-THEAD
-TBODY
-TR
-TD
-anything you want, including DIVS
-TFOOT

So, what you were trying to do in your code was append a table row to a div.
That's not allowed. A table row can only be the child element of a table
head, body, or foot.
What is "TBODY" actually. Is it like TABLE?
Click to expand...

No, it's the body of the table.
THEAD is the header.
TFOOT is the footer.
OK thanks. I've got a place to start looking now.
Click to expand...

Actually, you should really learn a bit more about html first. You need to
know what valid elements are and where to put them before you start creating
new ones. :)

A good place for you to start is to ask for good tutorials over in
comp.infosystems.www.authoring.html. Do read their FAQ first. They're kinda
picky about that over there.

And learn about doctypes while you're there.

For your perusal, here's a simple version that works and is valid html. Note
that form elements outside a form will not submit (your button), but since
this is just for grins, it's okay. Also note that a production version would
test for objects and methods before using them.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
function addRow() {
var tbody = document.getElementById("t1");
var newTr = document.createElement("TR");
var newTd = document.createElement("TD");
var newTxt = document.createTextNode("new row!");
newTd.appendChild(newTxt);
newTr.appendChild(newTd);
tbody.appendChild(newTr);
}
</script>
</head>

<body>
<table border="1">
<tbody id="t1">
<tr>
<td>
first row
</td>
</tr>
<tr>
<td>
<input type="button" value="click me"
onclick="addRow()" >
</td>
</tr>
</tbody>
</table>
</body>
</html>

--
 
M

Michael Winter

[snip]
TABLE
-THEAD
-TBODY
-TR
-TD
-anything you want, including DIVS
-TFOOT
Click to expand...

That isn't quite correct. If a table contains a TFOOT element, it must
appear before the first TBODY. This is so that in the case of a large
table, the footer can be rendered before all of the table body data has
been received. It would also be wise to mention that if a THEAD or TFOOT
element is present, the table must contain at least one explicitly
included TBODY.

[snip]

Mike
 
M

mark4asp

Hi, thanks for the response...

kaeli said:
Quite likely.... I know zip about javascript, and almost zip about html....


OK - that's what you mean by it being invalid - a DIV is not allowed inside
a TABLE? Don't really know what a "DIV" is, just thought it was a way to
create a label you could reference from other places in the html.
Click to expand...

In general I think you're better off using SPAN as a container but I
don't even think you can do that inside a table. You wouldn't want to
stick things between table, tbody, tr, td tags - it confuses the DOM -
a TBODY's natural 'child' is a TR.

If you want to have several TRs together you can put them in TBODYs.

kaeli's advice looks good.
What is "TBODY" actually. Is it like TABLE?
Click to expand...

It's a group of TRs. You can have several TBODYs inside a TABLE. Very
useful when you want to show, hide, create, remove bits of a TABLE,
but don't want to do this by having these bits as separate TABLEs
because you need to keep the column widths the same for nice tidy,
rendering.
Click to expand...
 
K

kaeli

[email protected] said:
[snip]
TABLE
-THEAD
-TBODY
-TR
-TD
-anything you want, including DIVS
-TFOOT
Click to expand...

That isn't quite correct. If a table contains a TFOOT element, it must
appear before the first TBODY.
Click to expand...

Please clarify "must".

I have used tfoot and placed it after the tbody with no problems in my
intranet code. Meaning that the table rendered as desired and expected in NN7
and IE6.
Will it fail on some browsers?
Will it not validate with W3C?

TIA
--
--
~kaeli~
Going to church doesn't make you a Christian any more than
standing in a garage makes you a car.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
 
M

Michael Winter

enlightened us with...
[snip]
If a table contains a TFOOT element, it must appear before the first
TBODY.
Click to expand...

Please clarify "must".
Click to expand...

From section 11.2.3 - Row groups: the THEAD, TFOOT, and TBODY elements:

"This example illustrates the order and structure of table heads,
feet, and bodies.

<TABLE>
<THEAD>
<TR> ...header information...
</THEAD>
<TFOOT>
<TR> ...footer information...
</TFOOT>
<TBODY>
<TR> ...first row of block one data...
<TR> ...second row of block one data...
</TBODY>
<TBODY>
<TR> ...first row of block two data...
<TR> ...second row of block two data...
<TR> ...third row of block two data...
</TBODY>
</TABLE>

TFOOT must appear before TBODY within a TABLE definition so that
user agents can render the foot before receiving all of the
(potentially numerous) rows of data."
I have used tfoot and placed it after the tbody with no problems in my
intranet code. Meaning that the table rendered as desired and expected
in NN7 and IE6.
Will it fail on some browsers?
Click to expand...

Probably not. You've no doubt seen as much tag soup as I have, yet
browsers still do something meaningful with it. The browser will probably
just error-correct the tree to include the TFOOT element before any TBODY
elements.
Will it not validate with W3C?
Click to expand...

No, it will not. The validator requires the order in the example above.

Upon reflection, I think the only significance to the order was what I
said in my last post: the footer should come first so the browser can
render it before the body. However, I doubt many attempt to do so.
Nevertheless, the mark-up is invalid. I don't think such a simple
correction should require any kind of justification.

Mike
 
K

kaeli

[email protected] said:
TFOOT must appear before TBODY within a TABLE definition so that
user agents can render the foot before receiving all of the
(potentially numerous) rows of data."
Click to expand...

Ah, okey dokey.
Nevertheless, the mark-up is invalid. I don't think such a simple
correction should require any kind of justification.
Click to expand...

It does to me.
I like to know why I'm doing something as illogical as writing a footer at
the top of a table before body content. ;)
YMMV.


--
 
G

Grant Wagner

Michael said:
Probably not. You've no doubt seen as much tag soup as I have, yet
browsers still do something meaningful with it. The browser will probably
just error-correct the tree to include the TFOOT element before any TBODY
elements.
Click to expand...

The problem is that:

<table>
<thead>
<tr><td>Head</td></tr>
</thead>
<tfoot>
<tr><td>Foot</td></tr>
</tfoot>
<tbody>
<tr><td>Body</td></tr>
</tbody>
</table>

Renders on Netscape 4.78 as:

Head
Foot
Body

Upon reflection, I think the only significance to the order was what I
said in my last post: the footer should come first so the browser can
render it before the body. However, I doubt many attempt to do so.
Nevertheless, the mark-up is invalid. I don't think such a simple
correction should require any kind of justification.
Click to expand...

Given that most modern user agents will, as you say, correct the incorrect
THEAD, TBODY, TFOOT layout, but Netscape 4.78 (and potentially other less
capable user agents on portable devices) may render THEAD, TFOOT, TBODY
incorrectly, it seems prudent at this point in HTML authoring to either omit
these elements entirely, or place them in what at first blush would appear to
be their logical order (or use TBODY for everything and control any CSS
issues using classes).

For example:

tfoot td {font-weight:bold;}

might become:

tbody.reallyTfoot td {font-weight:bold;}

Now, admittedly Netscape 4.78 won't honor either of these, but having the
cells in the tfoot appear bold isn't nearly as important as having the cells
in the tfoot appear at the bottom of the table.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

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
Sort by number of characters 1
Javascript DOM 1
Only one table shows up with the information 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Having trouble centering contents of td ? 3

Members online

Total: 25 (members: 2, guests: 23)
Robots: 400

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,020
Latest member
GenesisGai

Latest Threads

Top