473,508 Members | 3,235 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 25883
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
4064
Loop to create an array from a dynamic form.
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...
ASP / Active Server Pages
1
9885
Function to create comma separated list from any given column/table.
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...
Microsoft SQL Server
1
2899
Create dynamic rows - Help
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
Javascript
7
3492
Create Dynamic Controls and Displaying Page by Page on the form
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)...
.NET Framework
3
2960
How to create Dynamic Controls
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...
ASP.NET
1
4638
Create Dynamic Dropdownlist Controls and related event - ASP.NET
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...
.NET Framework
0
3467
Create Dynamic Dropdownlist Controls and related event
by: MaryamSh | last post by:
Create Dynamic Dropdownlist Controls and related event -------------------------------------------------------------------------------- Hi, I am creating a Dynamic Search in my application. I...
.NET Framework
2
8926
FLUSH PACKAGE CACHE DYNAMIC
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...
DB2 Database
0
3255
Dynamic Deletions of Rows and Columns
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...
Visual Basic 4 / 5 / 6
0
7128
Changing the language in Windows 10
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...
Windows Server
0
7332
Oralloy
Problem With Comparison Operator <=> in G++
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,...
C / C++
1
7058
The easy way to turn off automatic updates for Windows 10/11
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...
Windows Server
0
7502
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
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...
General
0
5635
agi2029
AI Job Threat for Devs
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,...
Career Advice
1
5057
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new...
Microsoft Access / VBA
0
1565
transfer the data from one system to another through ip address
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 ...
C# / C Sharp
1
769
muto222
How to add payments to a PHP MySQL app.
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
PHP
0
426
bsmnconsultancy
Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy
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...
General

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.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us