DOM - adding form field inside a table

A

Amir Hardon

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

toylet

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

Amir Hardon

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

Richard Cornford

[top post fixed]<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.

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;
Click to expand...

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);
Click to expand...

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

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);
Click to expand...

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">
Click to expand...
<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.
 
A

Amir Hardon

Richard said:
[top post fixed]<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.

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;
Click to expand...

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);
Click to expand...

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

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);
Click to expand...

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">
Click to expand...
<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.
Click to expand...

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

John

Richard said:
[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.
Click to expand...
<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.

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;
Click to expand...

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);
Click to expand...

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

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);
Click to expand...

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">
Click to expand...
<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.
Click to expand...

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".
Click to expand...

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

Ivo

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".
Click to expand...

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
 

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

Adding rows to table inside a form for input 7
Bootstrap contact form not working 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
DOM dynamically built table and addEventListener.... 29
How to add dropdown selected data to table using jquery 2
Filter table rows based on multiple checkboxes value 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Problem dynamically adding data to an existing table ... 10

Members online

No members online now.
Total: 247 (members: 0, guests: 247)
Robots: 355

Forum statistics

Threads
474,432
Messages
2,571,682
Members
48,796
Latest member
Greg L.

Latest Threads

Top