469,625 Members | 1,564 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,625 developers. It's quick & easy.

DOM - adding form field inside a table


I'm new to DOM and can't figure out this thing:

I'm trying to add a row to a table with a form field in one
of it's cells, but if I'm appending the field to a form
it gets out of the table. Can some one tell me what I'm doing wrong?
it looks like this:

var tbl=document.tbl;
var frm=document.frm;
var newcell=document.createElement("TD");
var newrow=document.createElement("TR");
var newfield=document.createElement("INPUT");
newfield.type="text";
newcell.appendChild(newfield);
newrow.appendChild(newcell);
tbl.appendChild(newrow);
frm.appendChild(newfield);

<form name="frm">
<table name="tbl">
</table>
</form>
Thanks,
-Amir.
--

Remove the 'dont_spam_me' and the dashes before mailing me.
Jul 20 '05 #1
6 2638
you sure that the table was initialized when your javapscript was
parsed? Your script was executed during window.onload(), when the table
was not yet initialized.
var tbl=document.tbl;
var frm=document.frm;
var newcell=document.createElement("TD");
var newrow=document.createElement("TR");
var newfield=document.createElement("INPUT");
newfield.type="text";
newcell.appendChild(newfield);
newrow.appendChild(newcell);
tbl.appendChild(newrow);
frm.appendChild(newfield);

<form name="frm">
<table name="tbl">
</table>
</form>


--
.~. Might, Courage, Vision. In Linux We Trust.
/ v \ http://www.linux-sxs.org
/( _ )\ Linux 2.4.22-xfs
^ ^ 6:58pm up 19:18 1 user 1.00 0.96
Jul 20 '05 #2
I just gave an example, my actual script is a bit longer,
and adds a row to the table when a button is clicked,
something like:

<head>
<script>
function addline(){
var tbl=document.tbl;
var frm=document.frm;
var newcell=document.createElement("TD");
var newrow=document.createElement("TR");
var newfield=document.createElement("INPUT");
newfield.type="text";
newcell.appendChild(newfield);
newrow.appendChild(newcell);
tbl.appendChild(newrow);
frm.appendChild(newfield);
}
</script>
</head>

<body>

<input type="button" onclick="addline()">

<form name="frm">
<table name="tbl">
</table>
</form>

</body>

toylet <toylet_at_mail.hongkong.com> wrote:
you sure that the table was initialized when your javapscript was
parsed? Your script was executed during window.onload(), when the table
was not yet initialized.
var tbl=document.tbl;
var frm=document.frm;
var newcell=document.createElement("TD");
var newrow=document.createElement("TR");
var newfield=document.createElement("INPUT");
newfield.type="text";
newcell.appendChild(newfield);
newrow.appendChild(newcell);
tbl.appendChild(newrow);
frm.appendChild(newfield);

<form name="frm">
<table name="tbl">
</table>
</form>


--
Remove the 'dont_spam_me' and the dashes before mailing me.
Jul 20 '05 #3
"Amir Hardon" <ha******************@actcom.co.il> wrote in message
news:ne********************@lnews.actcom.co.il...
[top post fixed]
toylet <toylet_at_mail.hongkong.com> wrote:
you sure that the table was initialized when your
javapscript was parsed? Your script was executed during
window.onload(), when the table was not yet initialized.
<snip>

Pleas do not top-post to comp.lang.javascript. The group FAQ outlines
acceptable posting style in section 2.3 paragraph 5 and references the
applicable standard.

<URL: http://jibbering.com/faq/#FAQ2_3 >
I just gave an example, my actual script is a bit
longer, and adds a row to the table when a button
is clicked, something like:

<head>
<script>
function addline(){
var tbl=document.tbl;
There is no reason to expect a table element to be available as a named
property of the document object.
var frm=document.frm;
var newcell=document.createElement("TD");
var newrow=document.createElement("TR");
var newfield=document.createElement("INPUT");
newfield.type="text";
newcell.appendChild(newfield);
This operation appends the newly created INPUT element to the newly
created TD element.
newrow.appendChild(newcell);
tbl.appendChild(newrow);
This operation attempts to append the newly created TR element to the
TABLE element. TR elements may not be children of TABLE elements in
HTML. TABLE elements may only have CAPTION, COL, COLGROUP, THEAD, TFOOT,
TBODY children, and it is to the implied TBODY child of the table that
the TR should probably be appended.
frm.appendChild(newfield);
DOMs are tree-like structures so any element cannot be in two locations
at once (except occasionally as a result of a kludge workaround by
certain browsers in response to invalid HTML). If you append an element
in one location it is automatically moved from its original position, so
the INPUT element is moved by this operation from being a child of TD to
being the last child of the form, and that child will be after the
table.
</script>
</head>

<body>

<input type="button" onclick="addline()">

<form name="frm">
<table name="tbl">

<snip>

TABLE elements do not have NAME attributes and a table is required to
contain at least one TR which in turn is required to contain at least
one TD or TH in valid HTML 4.

Richard.
Jul 20 '05 #4
Richard Cornford wrote:
"Amir Hardon" <ha******************@actcom.co.il> wrote in message
news:ne********************@lnews.actcom.co.il...
[top post fixed]
toylet <toylet_at_mail.hongkong.com> wrote:
you sure that the table was initialized when your
javapscript was parsed? Your script was executed during
window.onload(), when the table was not yet initialized.

<snip>

Pleas do not top-post to comp.lang.javascript. The group FAQ outlines
acceptable posting style in section 2.3 paragraph 5 and references the
applicable standard.

<URL: http://jibbering.com/faq/#FAQ2_3 >
I just gave an example, my actual script is a bit
longer, and adds a row to the table when a button
is clicked, something like:

<head>
<script>
function addline(){
var tbl=document.tbl;


There is no reason to expect a table element to be available as a named
property of the document object.
var frm=document.frm;
var newcell=document.createElement("TD");
var newrow=document.createElement("TR");
var newfield=document.createElement("INPUT");
newfield.type="text";
newcell.appendChild(newfield);


This operation appends the newly created INPUT element to the newly
created TD element.
newrow.appendChild(newcell);
tbl.appendChild(newrow);


This operation attempts to append the newly created TR element to the
TABLE element. TR elements may not be children of TABLE elements in
HTML. TABLE elements may only have CAPTION, COL, COLGROUP, THEAD, TFOOT,
TBODY children, and it is to the implied TBODY child of the table that
the TR should probably be appended.
frm.appendChild(newfield);


DOMs are tree-like structures so any element cannot be in two locations
at once (except occasionally as a result of a kludge workaround by
certain browsers in response to invalid HTML). If you append an element
in one location it is automatically moved from its original position, so
the INPUT element is moved by this operation from being a child of TD to
being the last child of the form, and that child will be after the
table.
</script>
</head>

<body>

<input type="button" onclick="addline()">

<form name="frm">
<table name="tbl">

<snip>

TABLE elements do not have NAME attributes and a table is required to
contain at least one TR which in turn is required to contain at least
one TD or TH in valid HTML 4.

Richard.


First of all thanks for your time,
I understand my scripting mistakes but I still don't have
an answer to my question:
If an element can't be at two locations, how can I add an input to a form
and get it displayed inside a table?

The only solution I think of is adding one input to the table,
and another one with type="hidden" to the form, and update the hidden field
whenever the text is changed.
But this won't work for me because I want to add an input of type="file".
--
Remove the 'dont_spam_me' and the dashes before mailing me.
Jul 20 '05 #5
Amir Hardon <ha******************@actcom.co.il> wrote in
news:ne********************@lnews.actcom.co.il:
Richard Cornford wrote:
"Amir Hardon" <ha******************@actcom.co.il> wrote in message
news:ne********************@lnews.actcom.co.il...
[top post fixed]
toylet <toylet_at_mail.hongkong.com> wrote:

you sure that the table was initialized when your
javapscript was parsed? Your script was executed during
window.onload(), when the table was not yet initialized.

<snip>

Pleas do not top-post to comp.lang.javascript. The group FAQ outlines
acceptable posting style in section 2.3 paragraph 5 and references
the applicable standard.

<URL: http://jibbering.com/faq/#FAQ2_3 >
I just gave an example, my actual script is a bit
longer, and adds a row to the table when a button
is clicked, something like:

<head>
<script>
function addline(){
var tbl=document.tbl;


There is no reason to expect a table element to be available as a
named property of the document object.
var frm=document.frm;
var newcell=document.createElement("TD");
var newrow=document.createElement("TR");
var newfield=document.createElement("INPUT");
newfield.type="text";
newcell.appendChild(newfield);


This operation appends the newly created INPUT element to the newly
created TD element.
newrow.appendChild(newcell);
tbl.appendChild(newrow);


This operation attempts to append the newly created TR element to the
TABLE element. TR elements may not be children of TABLE elements in
HTML. TABLE elements may only have CAPTION, COL, COLGROUP, THEAD,
TFOOT, TBODY children, and it is to the implied TBODY child of the
table that the TR should probably be appended.
frm.appendChild(newfield);


DOMs are tree-like structures so any element cannot be in two
locations at once (except occasionally as a result of a kludge
workaround by certain browsers in response to invalid HTML). If you
append an element in one location it is automatically moved from its
original position, so the INPUT element is moved by this operation
from being a child of TD to being the last child of the form, and
that child will be after the table.
</script>
</head>

<body>

<input type="button" onclick="addline()">

<form name="frm">
<table name="tbl">

<snip>

TABLE elements do not have NAME attributes and a table is required to
contain at least one TR which in turn is required to contain at least
one TD or TH in valid HTML 4.

Richard.


First of all thanks for your time,
I understand my scripting mistakes but I still don't have
an answer to my question:
If an element can't be at two locations, how can I add an input to a
form and get it displayed inside a table?

The only solution I think of is adding one input to the table,
and another one with type="hidden" to the form, and update the hidden
field whenever the text is changed.
But this won't work for me because I want to add an input of
type="file".


How about:

var tbl=document.getElementById("tbl");
var el=document.createElement("TBODY");
var newtbody=tbl.appendChild(el);
el=document.createElement("TR");
var newrow=newtbody.appendChild(el);
el=document.createElement("TD");
var newcell=newrow.appendChild(el);
el=document.createElement("INPUT");
var newfield=newcell.appendChild(el);
newfield.type="text";

<form name="frm">
<table id="tbl">
</table>
</form>
Jul 20 '05 #6
Ivo

"Amir Hardon" <ha******************@actcom.co.il> wrote in message
news:ne********************@lnews.actcom.co.il...

If an element can't be at two locations, how can I add an input to a form
and get it displayed inside a table?

The only solution I think of is adding one input to the table,
and another one with type="hidden" to the form, and update the hidden field whenever the text is changed.
But this won't work for me because I want to add an input of type="file".


No, no not necessary. Your table is completely inside the form, so whatever
elements you add to the table, if they are form elements, they will become
part of the form! Just add the input to the TD, the TD to the TR, the TR to
a TBODY and the TBODY to the table using the code in the other posts, then
alert(document.forms.frm.elements.length) and you will be convinced.
HTH
Ivo
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by alex bazan | last post: by
3 posts views Thread by Jim Heavey | last post: by
3 posts views Thread by John Hughes | last post: by
1 post views Thread by swethak | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.