473,739 Members | 9,109 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.tb l;
var frm=document.fr m;
var newcell=documen t.createElement ("TD");
var newrow=document .createElement( "TR");
var newfield=docume nt.createElemen t("INPUT");
newfield.type=" text";
newcell.appendC hild(newfield);
newrow.appendCh ild(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 2831
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.tb l;
var frm=document.fr m;
var newcell=documen t.createElement ("TD");
var newrow=document .createElement( "TR");
var newfield=docume nt.createElemen t("INPUT");
newfield.type=" text";
newcell.appendC hild(newfield);
newrow.appendCh ild(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.tb l;
var frm=document.fr m;
var newcell=documen t.createElement ("TD");
var newrow=document .createElement( "TR");
var newfield=docume nt.createElemen t("INPUT");
newfield.type=" text";
newcell.appendC hild(newfield);
newrow.appendCh ild(newcell);
tbl.appendChild (newrow);
frm.appendChild (newfield);
}
</script>
</head>

<body>

<input type="button" onclick="addlin e()">

<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.tb l;
var frm=document.fr m;
var newcell=documen t.createElement ("TD");
var newrow=document .createElement( "TR");
var newfield=docume nt.createElemen t("INPUT");
newfield.type=" text";
newcell.appendC hild(newfield);
newrow.appendCh ild(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.c o.il> wrote in message
news:ne******** ************@ln ews.actcom.co.i l...
[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.javas cript. 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.tb l;
There is no reason to expect a table element to be available as a named
property of the document object.
var frm=document.fr m;
var newcell=documen t.createElement ("TD");
var newrow=document .createElement( "TR");
var newfield=docume nt.createElemen t("INPUT");
newfield.type= "text";
newcell.append Child(newfield) ;
This operation appends the newly created INPUT element to the newly
created TD element.
newrow.appendC hild(newcell);
tbl.appendChil d(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.appendChil d(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="addlin e()">

<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.c o.il> wrote in message
news:ne******** ************@ln ews.actcom.co.i l...
[top post fixed]
toylet <toylet_at_mail .hongkong.com> wrote:
you sure that the table was initialized when your
javapscrip t was parsed? Your script was executed during
window.onloa d(), when the table was not yet initialized.

<snip>

Pleas do not top-post to comp.lang.javas cript. 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.tb l;


There is no reason to expect a table element to be available as a named
property of the document object.
var frm=document.fr m;
var newcell=documen t.createElement ("TD");
var newrow=document .createElement( "TR");
var newfield=docume nt.createElemen t("INPUT");
newfield.type ="text";
newcell.appen dChild(newfield );


This operation appends the newly created INPUT element to the newly
created TD element.
newrow.append Child(newcell);
tbl.appendChi ld(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.appendChi ld(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="addlin e()">

<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.c o.il> wrote in
news:ne******** ************@ln ews.actcom.co.i l:
Richard Cornford wrote:
"Amir Hardon" <ha************ ******@actcom.c o.il> wrote in message
news:ne******** ************@ln ews.actcom.co.i l...
[top post fixed]
toylet <toylet_at_mail .hongkong.com> wrote:

you sure that the table was initialized when your
javapscri pt was parsed? Your script was executed during
window.onlo ad(), when the table was not yet initialized.

<snip>

Pleas do not top-post to comp.lang.javas cript. 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.tb l;


There is no reason to expect a table element to be available as a
named property of the document object.
var frm=document.fr m;
var newcell=documen t.createElement ("TD");
var newrow=document .createElement( "TR");
var newfield=docume nt.createElemen t("INPUT");
newfield.typ e="text";
newcell.appe ndChild(newfiel d);


This operation appends the newly created INPUT element to the newly
created TD element.
newrow.appen dChild(newcell) ;
tbl.appendCh ild(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.appendCh ild(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="addlin e()">

<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.ge tElementById("t bl");
var el=document.cre ateElement("TBO DY");
var newtbody=tbl.ap pendChild(el);
el=document.cre ateElement("TR" );
var newrow=newtbody .appendChild(el );
el=document.cre ateElement("TD" );
var newcell=newrow. appendChild(el) ;
el=document.cre ateElement("INP UT");
var newfield=newcel l.appendChild(e l);
newfield.type=" text";

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

"Amir Hardon" <ha************ ******@actcom.c o.il> wrote in message
news:ne******** ************@ln ews.actcom.co.i l...

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.eleme nts.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
3442
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 object" if i change my custom xml dataisland using <xml id="dataisland"></xml> instead of the <div id="dataisland" ...> it shows a "type mismatch" error. I have no problem accesing to the <di> tags inside the <table
11
14411
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 form (by clicking and command button)that will add a column (field) to each table and label it with the current date that is specified in my form. Does anyone know how I can go about doing this? Any suggestion will be greatly appreciated.
1
2458
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 exists off of 1 table and when I add a new field into the table I have no problem adding into the corresponding form. However when I add a new field to one of the following tables: - Employee List & Main Profile tables (This is what the combined...
3
1959
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 checkmark box that is selectable as on or off (on if there is a checkmark inside it). The table that contains the data for the form is known as "red chocolate
6
2506
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 products). Tables: tblCategoryDetails CategoryID SpecID
3
4880
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 the best method? Do you have a sample of how to do this?
3
5168
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" The user control has this button on its page. I am outputing the <form runat="server"> inside the render method and have also tried adding it to the page and to the control without any luck. Any help appreciated.
3
5350
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 number of possible values is over 300. For data consistancy I've locked the subform so that the user can't add or change values manually without using the lookup form. My question is: What's the best way of adding the record to table B which the...
1
4906
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 events when click on that date that perticular event displyed in a text box.But my requirement is to when click on that date that related event displyed in same td row not the text box. and also i add the events to that calendar.plz advice how to...
0
8969
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9479
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9337
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9266
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
6054
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4570
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3280
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2748
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2193
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.