473,526 Members | 3,038 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Create dynamic rows

"kaeli" <in********************@NOSPAMatt.net> wrote in message
news:MP************************@nntp.lucent.com...
In article <be**********@mawar.singnet.com.sg>, st********@yahoo.com.sg
shared the illuminating thought...
hi,

Can someone point me to a website where I can find a "create dynamic rows" javascript that work for IE, NS6 & NS7?

Thank You.

regards,
Cindy


I have one that you might be able to modify to suit you.
NN6+, Mozilla, and IE5+ only.
Note that your table MUST have a TBODY node for this to work.

Excerpt from a really big script that has been tested in NN6, Mozilla
1.2, and IE6:

TBL = document.getElementById("t1");
TR = document.createElement("TR");
TD = document.createElement("TD");
TH = document.createElement("TH");
TH.appendChild(document.createTextNode("Your Name:"));
S = document.createElement("input");
S.setAttribute("type","text");
S.setAttribute("name","tname");
TD.appendChild(S);
TR.appendChild(TH);
TR.appendChild(TD);
TBL.appendChild(TR);
The whole script is very large and makes a dynamic form for customer
support (intranet application), so I didn't want to post it here.

----------------------------------------
~kaeli~
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
Kill one man and you are a murderer.
Kill millions and you are a conqueror.
Kill everyone and you are God.
----------------------------------------

hi Kaeli,

I have downloaded a script from javascript.internet.com

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function addRow(id){
var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
td1.appendChild(document.createTextNode("column 1"))
var td2 = document.createElement("TD")
td2.appendChild (document.createTextNode("column 2"))
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);
}
-->
</script>
</HEAD>

<BODY>
<a href="javascript:addRow('myTable')">Add row</a>
<table id="myTable" cellspacing="0" border="1">
<tbody>
<tr>
<td>row1_column1</td><td>row1_column1</td>
</tr>
</tbody>
</table>
</BODY>
</HTML>

and I tried to add the following after the td2, but it didn't work.

S = document.createElement("input");
S.setAttribute("type","text");
S.setAttribute("name","tname");
TD.appendChild(S);

Can you tell me what was wrong? Thank You.

Regards,
Cindy
Jul 20 '05 #1
7 25884
In article <be**********@reader01.singnet.com.sg>,
st********@yahoo.com.sg shared the illuminating thought...
<snip>

and I tried to add the following after the td2, but it didn't work.

S = document.createElement("input");
S.setAttribute("type","text");
S.setAttribute("name","tname");
TD.appendChild(S);

Can you tell me what was wrong? Thank You.


You can't have a form element outside a form in any browser but IE.
And you have to be careful with where you put the form tags. So you wrap
the table in the form tags.
As to why it didn't work, you didn't change the variable name from TD to
td2.

The following worked fine in IE and Mozilla.
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function addRow(id){
var tbody = document.getElementById(id).getElementsByTagName(" TBODY")
[0];
var row = document.createElement("TR");
var td1 = document.createElement("TD");
td1.appendChild(document.createTextNode("column 1"));
var td2 = document.createElement("TD");
td2.appendChild (document.createTextNode("column 2"));
S = document.createElement("input");
S.setAttribute("type","text");
S.setAttribute("name","tname");
td2.appendChild(S);
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);
}
-->
</script>
</HEAD>

<BODY>
<form name="f1" id="f1">
<a href="javascript:addRow('myTable')">Add row</a>
<table id="myTable" cellspacing="0" border="1">
<tbody>
<tr>
<td>row1_column1</td><td>row1_column1</td>
</tr>
</tbody>
</table>
</form>
</BODY>
</HTML>

----------------------------------------
~kaeli~
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
Jesus saves, Allah protects, and Cthulhu
thinks you'd make a nice sandwich.
----------------------------------------
Jul 20 '05 #2
kaeli <in********************@NOSPAMatt.net> writes:
You can't have a form element outside a form in any browser but IE.


Sure you can, and it's also legal according to the HTML specification.
I know that Netscape 4 don't like it, but it doesn't understand
document.createElement either, so this code is not for NS4 anyway.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #3
In article <is**********@hotpop.com>, lr*@hotpop.com shared the
illuminating thought...
kaeli <in********************@NOSPAMatt.net> writes:
You can't have a form element outside a form in any browser but IE.


Sure you can, and it's also legal according to the HTML specification.
I know that Netscape 4 don't like it, but it doesn't understand
document.createElement either, so this code is not for NS4 anyway.


I should have elaborated, apparently.

It may be legal, but I prefer successful controls. I can only think of
one or two situations in which I wouldn't need the form to submit. The
rest of the time, I would. Consistency is just something I like a lot.
Not to mention that not all browsers like it - I can't vouch for
anything but NN4 hating it, but I certainly haven't checked out ALL
browsers, including Opera(7), Mac IE, or whatever other browsers are out
there, which do support createElement.

http://www.w3.org/TR/REC-html40/interact/forms.html

"The elements used to create controls generally appear inside a FORM
element, but may also appear outside of a FORM element declaration when
they are used to build user interfaces. This is discussed in the section
on intrinsic events. Note that controls outside a form cannot be
successful controls."

"A successful control is "valid" for submission. Every successful
control has its control name paired with its current value as part of
the submitted form data set. A successful control must be defined within
a FORM element and must have a control name."

----------------------------------------
~kaeli~
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
Jesus saves, Allah protects, and Cthulhu
thinks you'd make a nice sandwich.
----------------------------------------
Jul 20 '05 #4
kaeli,

thank you. This is excellent script.
However, I want to add new row to table before current row, using mouse
right click or add command.

Current row is the row whose input box has focus before clicking to add
command.

Any idea how to implement this ?

Andrus.

"kaeli" <in********************@NOSPAMatt.net> wrote in message
The following worked fine in IE and Mozilla.
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function addRow(id){
var tbody = document.getElementById(id).getElementsByTagName(" TBODY")
[0];
var row = document.createElement("TR");
var td1 = document.createElement("TD");
td1.appendChild(document.createTextNode("column 1"));
var td2 = document.createElement("TD");
td2.appendChild (document.createTextNode("column 2"));
S = document.createElement("input");
S.setAttribute("type","text");
S.setAttribute("name","tname");
td2.appendChild(S);
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);
}
-->
</script>
</HEAD>

<BODY>
<form name="f1" id="f1">
<a href="javascript:addRow('myTable')">Add row</a>
<table id="myTable" cellspacing="0" border="1">
<tbody>
<tr>
<td>row1_column1</td><td>row1_column1</td>
</tr>
</tbody>
</table>
</form>
</BODY>
</HTML>

Jul 20 '05 #5
kaeli <in********************@NOSPAMatt.net> writes:
It may be legal, but I prefer successful controls. I can only think of
one or two situations in which I wouldn't need the form to submit.


I, on the other hand, have never done any server side coding, but have
often made interactive pages with "user interfaces".
If the form is not going to be submitted to a server, there is no need
for "successful" controls (I dislike that wording, it makes it sound like
non-successful controls are a bad thing).

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #6
In article <3f**********@news.estpak.ee>, no**************@online.ee
shared the illuminating thought...
kaeli,

thank you. This is excellent script.
However, I want to add new row to table before current row, using mouse
right click or add command.

Current row is the row whose input box has focus before clicking to add
command.

Any idea how to implement this ?

Andrus.


I got this much done, but I have to do real work now. :)
It does as you say above, but you have to click the link. It's up to you
to catch a click and call it.

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var b4;
var x = 0;

function addRow(id){
var tbody = document.getElementById(id).getElementsByTagName(" TBODY")
[0];
var row = document.createElement("TR");
row.setAttribute("id","row_"+x);
var td1 = document.createElement("TD");
td1.appendChild(document.createTextNode("new row "+x));
var td2 = document.createElement("TD");
td2.appendChild (document.createTextNode("new row "+x));
S = document.createElement("input");
S.setAttribute("type","text");
S.setAttribute("name","tname_"+x);
S.setAttribute("id","tid_"+x);
td2.appendChild(S);
if (S.attachEvent)
{
S.attachEvent('onfocus', setIt);
}
else
{
S.onchange = setIt;
}
row.appendChild(td1);
row.appendChild(td2);
b4.insertAdjacentElement("BeforeBegin",row);
x++;
}

function setIt()
{
setTo = event.srcElement.name.substring(event.srcElement.n ame.indexOf
("_")+1, event.srcElement.name.length);
b4 = document.getElementById("row_"+setTo);
}
-->
</script>
</HEAD>

<BODY>
<form name="f1" id="f1">
<a href="javascript:addRow('myTable')">Add row</a>
<table id="myTable" cellspacing="0" border="1">
<tbody>
<tr id="first">
<td>row1_column1</td><td>row1_column1</td>
</tr>
</tbody>
</table>
</form>
<script>
b4 = document.getElementById("first");
</script>
</BODY>
</HTML>
----------------------------------------
~kaeli~
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
Jesus saves, Allah protects, and Cthulhu
thinks you'd make a nice sandwich.
----------------------------------------
Jul 20 '05 #7
In article <MP************************@nntp.lucent.com>,
in********************@NOSPAMatt.net shared the illuminating thought...
Andrus.


I got this much done, but I have to do real work now. :)
It does as you say above, but you have to click the link. It's up to you
to catch a click and call it.


Oh, and it's now IE ONLY.
Mozilla/Netscape don't support insertAdjacentElement, but I couldn't get
insertBefore to work right with IE and Moz/NN. I am pretty sure one
could, but I'm getting busy at work now.
If you'd like to play more, check out my fav reference for this sort of
thing.

http://msdn.microsoft.com/library/default.asp?
url=/workshop/author/dhtml/reference/methods.asp

And don't forget, if this is production for a real internet site, make
sure you put in error checking and stuff so it doesn't crash older
browsers.

----------------------------------------
~kaeli~
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
Jesus saves, Allah protects, and Cthulhu
thinks you'd make a nice sandwich.
----------------------------------------
Jul 20 '05 #8

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

Similar topics

2
4069
by: Nick | last post by:
Loop to create an array from a dynamic form. I'm having trouble with an application, and I'll try to explain it as clearly as possible: 1. I have a form with two fields, say Apples and Oranges. The user selects from a drop down menu, between 1-10 of each and clicks submit. The resulting page will display a NEW form, with rows and a list...
1
9887
by: Not Me | last post by:
Hi, I'm sure this is a common problem.. to create a single field from a whole column, where each row would be separated by a comma. I can do this for a specified table, and column.. and I've created a function using VBA to achieve a more dynamic (and very slow) solution.. so I would like to implement it using a user defined function in...
1
2902
by: Cindy | last post by:
hi, Can someone point me to a website where I can find a "create dynamic rows" javascript that work for IE, NS6 & NS7? Thank You. regards, Cindy
7
3496
by: Bil Muh | last post by:
Esteemede Developers, I would like to Thank All of You in advance for your sincere guidances. I am developing a software using Visual C++ .NET Standard Edition with Windows Form (.NET) template. Briefly -------------------------------------------------------------------------------------------- I need to create dynamically some...
3
2962
by: RSB | last post by:
Hi Every one Having tuff time creating web controls Dynamically. All i am trying to do is read a table and generate a list of ASP TEXT Box. So how do i create this Control dynamically and where do i add the EventHandler to it. Thanks RSB
1
4641
by: MaryamSh | last post by:
Hi, I am creating a Dynamic Search in my application. I create a user control and in Page_load event I create a dynamic dropdownlist and 2 dynamic button (Add,Remove) By pressing Add button ,another row will be created with the same control (I mean another dropdown and 2 button) and so on. and by pressing Remove button the selecetd row will be...
0
3470
by: MaryamSh | last post by:
Create Dynamic Dropdownlist Controls and related event -------------------------------------------------------------------------------- Hi, I am creating a Dynamic Search in my application. I create a user control and in Page_load event I create a dynamic dropdownlist and 2 dynamic button (Add,Remove) By pressing Add button ,another row...
2
8929
by: Damir | last post by:
Hello! I have noticed that after (sucessfully) executing the command: FLUSH PACKAGE CACHE DYNAMIC the dynamic SQL statement cache is not completely cleared (some of the dynamic SQL statement elements are not reset). For example, looking at the dynamic SQL snapshot I see a certain SQL statement that has been executed a number of times and...
0
3256
by: ebernon | last post by:
The Dynamic deletion of Rows and Columns within a program is frequently desired but often hard to obtain. The Help files for VB-6 contained within Excel 2002 (XP) don’t always provide the help you need to perform this operation. By recording a Macro, you can develop the following code snipet: Sub Macro1() ' ' Macro1 Macro ' Macro...
0
7251
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7474
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. ...
0
7646
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...
0
7600
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
5776
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
4812
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...
0
1700
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
1
887
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
545
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...

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.