Create dynamic rows

C

Cindy

kaeli said:
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.
----------------------------------------
Click to expand...
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
 
K

kaeli

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.
Click to expand...

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.
----------------------------------------
 
L

Lasse Reichstein Nielsen

kaeli said:
You can't have a form element outside a form in any browser but IE.
Click to expand...

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
 
K

kaeli

[email protected] shared the said:
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.
Click to expand...

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.
----------------------------------------
 
A

Andrus Moor

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.
 
L

Lasse Reichstein Nielsen

kaeli said:
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.
Click to expand...

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
 
K

kaeli

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.
Click to expand...

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.name.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.
----------------------------------------
 
K

kaeli

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.
Click to expand...

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.
----------------------------------------
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Only one table shows up with the information 2
Javascript and Dynamic Table 2
How to read value from a text-field, create dynamic 4
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Sort by number of characters 1
How can I create a table using the input element? 1
Filter table rows based on multiple checkboxes value 2
Adding rows to table inside a form for input 7

Members online

Total: 19 (members: 1, guests: 18)
Robots: 341

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,015
Latest member
AmbrosePal

Latest Threads

Top