By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,382 Members | 1,631 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,382 IT Pros & Developers. It's quick & easy.

Create dynamic rows

P: n/a
"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
Share this Question
Share on Google+
7 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.