473,378 Members | 1,429 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,378 software developers and data experts.

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 2804
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: alex bazan | last post by:
I'm building a cross-browser XML dataisland. This code works perfectly in mozilla, but i have problems with explorer. it tells me that: "diXML.getElementsByTagName(..).0 is null or not an...
11
by: Bobbak | last post by:
Hello All, I have these tables (lets call it ‘EmpCalls', ‘EmpOrders', and ‘Stats') that each contain the list of EmployeeIDs, I want to be able to create a Module in which I could call in my VB...
1
by: Tony D. | last post by:
I could really use some help with a problem I am having. I am trying to add a new field to an existing form that combines two tables into one form. In this same databse I have another form that...
3
by: Earthling | last post by:
Any help would be appreciated to solve the following simple problem that I will describe. *** There is a form called "red chocolate form". The form has a particular subform field that has a...
6
by: Robin S. | last post by:
**Eric and Salad - thank you both for the polite kick in the butt. I hope I've done a better job of explaining myself below. I am trying to produce a form to add products to a table (new...
3
by: Jim Heavey | last post by:
Trying to figure out the technique which should be used to add rows to a datagrid. I am thinking that I would want an "Add" button on the footer, but I am not quite sure how to do that. Is that...
3
by: John Hughes | last post by:
I'm trying to add a user control to a form via the pages render method and I get the following error : "Control 'Button1' of type 'Button' must be placed inside a form tag with runat=server" ...
3
by: john | last post by:
In my form (table A) I have subform (table B (only 2 fieds: ID and App_name) where table A -Table B are linked 1XM. To be able to add a record in the subform I want to use a lookup form since the...
1
by: swethak | last post by:
Hi, I am desiging the calendar application for that purpose i used the below code. But it is for only displys calendar. And also i want to add the events to calendar. In that code displys the...
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...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.