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

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 25877
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
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...
1
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...
1
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
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)...
3
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...
1
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...
0
by: MaryamSh | last post by:
Create Dynamic Dropdownlist Controls and related event -------------------------------------------------------------------------------- Hi, I am creating a Dynamic Search in my application. I...
2
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...
0
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...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
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
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
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...
0
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,...
0
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,...
0
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...
0
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,...

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.