473,326 Members | 2,255 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

create a new row in a table

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

Jul 23 '05 #1
10 2270
In article <41********@news.wineasy.se>, "Peter Kirk" <peter> enlightened us
with...
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).

Invalid HTML.

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

<div id="my_div"></div>
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/stru...tml#edef-TBODY
<!ELEMENT TBODY O O (TR)+ -- table body -->

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


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.

--
--
~kaeli~
The definition of a will?... (It's a dead giveaway.)
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #2
Hi, thanks for the response...

"kaeli" <ti******@NOSPAM.comcast.net> skrev i en meddelelse
news:MP************************@nntp.lucent.com...
In article <41********@news.wineasy.se>, "Peter Kirk" <peter> enlightened us
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).


Invalid HTML.

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


Quite likely.... I know zip about javascript, and almost zip about html....
</tr>

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


A div is not allowed to be the child of TBODY.


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/stru...tml#edef-TBODY
<!ELEMENT TBODY O O (TR)+ -- table body -->
What is "TBODY" actually. Is it like TABLE?


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


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.


OK thanks. I've got a place to start looking now.
Jul 23 '05 #3
In article <41******@news.wineasy.se>, peter@ciber enlightened us with...

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

Learn HTML first. You'll never code decent DHTML until you do.
</tr>

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


A div is not allowed to be the child of TBODY.


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.


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.
TBODY has only TR as a child.
http://www.w3.org/TR/REC-html40/stru...tml#edef-TBODY
<!ELEMENT TBODY O O (TR)+ -- table body -->
What is "TBODY" actually. Is it like TABLE?


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.


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>

--
--
~kaeli~
Acupuncture is a jab well done.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #4
On Mon, 27 Sep 2004 14:02:42 -0500, kaeli <ti******@NOSPAM.comcast.net>
wrote:

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


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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #5
On 27 Sep 2004 19:35:35 +0200, "Peter" <peter@ciber> wrote:
Hi, thanks for the response...

"kaeli" <ti******@NOSPAM.comcast.net> skrev i en meddelelse
news:MP************************@nntp.lucent.com.. .
In article <41********@news.wineasy.se>, "Peter Kirk" <peter> enlightened

us
> 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 notcreated in > the table when I click the button? (I am using Internet Explorer 6).
>


Invalid HTML.

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


Quite likely.... I know zip about javascript, and almost zip about html....
> </tr>
>
> <div id="my_div"></div>


A div is not allowed to be the child of TBODY.


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.


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.
TBODY has only TR as a child.
http://www.w3.org/TR/REC-html40/stru...tml#edef-TBODY
<!ELEMENT TBODY O O (TR)+ -- table body -->


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


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.
> <tr>
> <td>
> <input type="button" value="click me"
> onclick="javascript:addField()" >


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.


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


Jul 23 '05 #6
In article <opsez6hwiix13kvk@atlantis>, M.******@blueyonder.co.invalid
enlightened us with...
On Mon, 27 Sep 2004 14:02:42 -0500, kaeli <ti******@NOSPAM.comcast.net>
wrote:

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


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


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

Jul 23 '05 #7
kaeli <ti******@NOSPAM.comcast.net> writes:
That isn't quite correct. If a table contains a TFOOT element, it must
appear before the first TBODY.
Please clarify "must".


....
Will it fail on some browsers?
Who knows, considering ...
Will it not validate with W3C?


It won't. It's not valid HTML.

From
<URL:http://www.w3.org/TR/html4/struct/tables.html#edef-TABLE>
"<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>"
and
"TFOOT must appear before TBODY within a TABLE definition"

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #8
On Wed, 29 Sep 2004 09:02:19 -0500, kaeli <ti******@NOSPAM.comcast.net>
wrote:
In article <opsez6hwiix13kvk@atlantis>, M.******@blueyonder.co.invalid
enlightened us with...
[snip]
If a table contains a TFOOT element, it must appear before the first
TBODY.


Please clarify "must".


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?
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?


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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #9
In article <opse3jv4gcx13kvk@atlantis>, M.******@blueyonder.co.invalid
enlightened us with...

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."

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


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.
--
--
~kaeli~
A lot of money is tainted - It taint yours and it taint mine.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #10
Michael Winter wrote:
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?
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.


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.


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.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #11

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Phil Powell | last post by:
create table if not exists nnet_produkt_varegruppe ( nnet_produkt_varegruppe_id int not null auto_increment, primary key(nnet_produkt_varegruppe_id), nnet_produkt_varegruppe_navn varchar(255) not...
6
by: dev | last post by:
how create a temp table as a copy of a existing table and then update1 field and insert the hole temp table back in the existing table? please any help? if i have 10 fields in 1 record and...
4
by: Michael Jackson | last post by:
I have a stored procedure to create a table. In my program I want the user to name the table to be created, therefore I pass a parameter to the SP for the table name. I cannot get it to work. It...
7
by: Wolfgang Kreuzer | last post by:
Hello all, I have two tables - Projects and ProjectStruct Table Projects contains master records of the projects, ProjectStruct allows to define a project herarchie and contains the fields...
1
by: poohnie08 | last post by:
i have a excel spreadsheet showing staff name, date,work hour, ot hour, slot1, slot2, slot3, slot4 and others). The "()" will keep repeating from day 1 until end of month. eg in excel spreadsheet,...
24
by: flkeyman | last post by:
Work in legal office. Trying to create solid designed database structure. This is list of tables w/fields and primary keys. Any comments/advice greatly appreciated. tbl-Defendants CaseNumber...
6
by: Peter Nurse | last post by:
For reasons that are not relevant (though I explain them below *), I want, for all my users whatever privelige level, an SP which creates and inserts into a temporary table and then another SP...
27
by: max | last post by:
Hello, I am a newbye, and I'm trying to write a simple application. I have five tables with three columns; all tables are identical; I need to change some data in the first table and let VB...
4
by: etuncer | last post by:
Hello All, I have Access 2003, and am trying to build a database for my small company. I want to be able to create a word document based on the data entered through a form. the real question is...
2
by: lakuma | last post by:
Hi, I have a table called A (say) with columns called name, place, animal and thing. I would want to write an on insert trigger on this table, which would create a table with the name of the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.