Dynamic table rows

Dan Joyce · Dan Joyce

I'm creating a form online laid on in a table. It is a order form for images
from a educational library. We recieve orders from 1-thousands of images. So,
I created a form online that is submitted to us automatically. But, as of now,
it has room for 10 images in an order. Can I use something, my guess would be
JavaScript and put in an arguement that woudl repeat the clean row of the order
form when you told it you have another image or when you fill in information
for the current one.

So, it would start as a form for 1 image. When you filledin the page number
the image is on, author, etc. it would automatically create anotehr row for a
second image with the same blank fields (page, author, etc.).

Any pointers? Any tutorials or starter scripts? Anything to watch out for?

Thanks
Dan J.

The ScareCrow · The ScareCrow

Check out the link, I think it's what you want

Ken

[url]http://javascript.internet.com/miscellaneous/add-a-row.html[/url]

Dan Joyce · Dan Joyce

That is what I'm looking for in a way. But, it doesn't seem to be editable in
the way I need, at least at first glance. The problem is likely my limited
JavaScript knowledge. For instance, I was trying to use document.write to
write the different html things like TR, TD, etc. I don't know what this all
is and how to edit it.

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);

Obviously, appendChild, document.createElement, and the like are JavaScript
commands that I do not know. But, they seemto only be able to create TD, etc,
not input areas (Textfields and the like). Is that true? Has JavaScript
really changed that much since I used it 4 years ago or did I just never use
such commands?

Thansk
Dan J.

The ScareCrow · The ScareCrow

I have attached a complete page, just copy and paste. See if this is what you
are after.

Ken

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<SCRIPT LANGUAGE="JavaScript">


</script>
</head>

<body>

<a href="javascript:addRow('myTable')">Add row</a>
<form>
<input type="hidden" name="numberOfUploads" value="1">
<table id="myTable" cellspacing="0" border="1">
<tbody>
<tr>
<td>Upload Document 1</td><td><input type="file" name="upload1"></td>
</tr>
</tbody>
</table>
</form>

</body>
</html>

Dan Joyce · Dan Joyce

Thanks, but that doesn't work in FireFox. I need something that will work in every newer browser. Any idea why it wouldn't work?

Thanks
Dan J.

The ScareCrow · The ScareCrow

Where I work, I only need to be concerned with IE and NN. So I can't help with
firefox.

From the error message I would say that it does not like the code
document.getElementById
So you will need to research firefox and see what code is the same.
The createElement function will create any element that you need.

Ken

rob::digitalburn · rob::digitalburn

FF does support document.getElementById as far as I know, but you can always
use MM findObj() function instead.

The ScareCrow wrote:

> Where I work, I only need to be concerned with IE and NN. So I can't
> help with firefox.
>
> From the error message I would say that it does not like the code
> document.getElementById
> So you will need to research firefox and see what code is the same.
> The createElement function will create any element that you need.
>
> Ken

Dan Joyce · Dan Joyce

Sorry, learning this stuff as I go. Never had to do ANY of this 4 years ago.
I dont' nkow what I mean by

"use MM findObj() function instead."

How do I go about this? It does seem to be the problem. Here is my updated
code that is much cleaner AND WORKS! in IE (ugh)

Thanks
Dan J.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<SCRIPT LANGUAGE="JavaScript">


</script>
</head>

<body>

<form>
<input type="hidden" name="numberOfImages" id="numberOfImages" value="1">
<table id="orderTable" cellspacing="0" border="1">
<thead>
<tr>
<td width="13"> </td>
<td width="71"><div
align="center"><strong>pg/pl/fig</strong></div></td>
<td width="202"><div align="center"><strong>Architect, Aritst or Firm
</strong></div></td>
<td width="342"><div align="center"><strong>Project Title / Building
Name / Description / Location </strong></div></td>
<td width="162"><div align="center"><strong>Date</strong></div></td>
<td width="96"><div align="center"><strong>Slide or Digital Image
</strong></div></td>
</tr>
</thead>

<tbody>
<tr>
<td><div align="center">1</div></td>
<td><div align="center"><input name="1PgPlFig" type="text" id="1PgPlFig"
size="10" maxlength="20"></div></td>
<td><div align="center"><input name="1ArchArtFirm" type="text"
id="1ArchArtFirm" size="15" maxlength="50"></div></td>
<td><div align="center"><input name="1Description" type="text"
id="1Description" size="45" maxlength="100"></div></td><br>
<td><div align="center"><strong><input name="1ImageDate" type="text"
id="1ImageDate" size="10" maxlength="10"></strong></div></td>
<td><div align="center">
<label><input type="checkbox" name="1Slide" value="YES">S</label>
<label><input type="checkbox" name="1Digital" value="YES">D</label>
</div></td>

</tr>
</tbody>
</table>
</form>
<a href="javascript:addRow('orderTable')">Add row</a>

</body>
</html>

rob::digitalburn · rob::digitalburn

I've been doing this stuff for longer than four years, so it's always been
around :)

What I mean is, just change every instance of document.getElementById() to
findObj(), then make sure that the findObj function is somewhere in your JS
code. It's available in the code snippets library in DW.

It looks as if you're going about what you're doing in a very labourious
manner, although I haveb't been following this thread, so I'm not exactly
sure what you're trying to do.

Dan Joyce wrote:

> Sorry, learning this stuff as I go. Never had to do ANY of this 4
> years ago. I dont' nkow what I mean by
>
> "use MM findObj() function instead."
>
> How do I go about this? It does seem to be the problem. Here is my
> updated code that is much cleaner AND WORKS! in IE (ugh)
>
> Thanks
> Dan J.
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
>
> <html>
> <head>
> <title>Untitled</title>
> <SCRIPT LANGUAGE="JavaScript">
>
> 
> </script>
> </head>
>
> <body>
>
>
> <form>
> <input type="hidden" name="numberOfImages" id="numberOfImages"
> value="1"> <table id="orderTable" cellspacing="0" border="1">
> <thead>
> <tr>
> <td width="13"> </td>
> <td width="71"><div
> align="center"><strong>pg/pl/fig</strong></div></td>
> <td width="202"><div align="center"><strong>Architect,
> Aritst or Firm </strong></div></td>
> <td width="342"><div align="center"><strong>Project Title /
> Building Name / Description / Location </strong></div></td>
> <td width="162"><div
> align="center"><strong>Date</strong></div></td> <td
> width="96"><div align="center"><strong>Slide or Digital Image
> </strong></div></td> </tr>
> </thead>
>
> <tbody>
> <tr>
> <td><div align="center">1</div></td>
> <td><div align="center"><input name="1PgPlFig" type="text"
> id="1PgPlFig" size="10" maxlength="20"></div></td>
> <td><div align="center"><input name="1ArchArtFirm" type="text"
> id="1ArchArtFirm" size="15" maxlength="50"></div></td>
> <td><div align="center"><input name="1Description" type="text"
> id="1Description" size="45" maxlength="100"></div></td><br>
> <td><div align="center"><strong><input name="1ImageDate"
> type="text" id="1ImageDate" size="10"
> maxlength="10"></strong></div></td> <td><div align="center">
> <label><input type="checkbox" name="1Slide" value="YES">S</label>
> <label><input type="checkbox" name="1Digital" value="YES">D</label>
> </div></td>
>
> </tr>
> </tbody>
> </table>
> </form>
> <a href="javascript:addRow('orderTable')">Add row</a>
>
> </body>
> </html>

The ScareCrow · The ScareCrow

First, there is no element of type "textfield"

Then the main problem is the following line
td2.appendChild (document.createElement("<input type='textfield'
name='PgPlFig"+imageCount+"' size='10' maxlength='20'>"));

While this works in IE and NN, firefox does not like it, so you need to do it
by the standard (W3C), like so

var td2 = document.createElement("TD");
td2.setAttribute("align","center");

var td2a = document.createElement("input");
td2a.type = 'text';
td2a.id = 'PgPlFig' + imageCount ;
td2a.name = 'PgPlFig' + imageCount;
td2a.size = '10';
td2a.maxlength = '20';
td2.appendChild (td2a);

Ken

rob::digitalburn · rob::digitalburn

Hum, I just read your original question, I think you can do it an aweful lot
more simply than you are doing. I wouldn't use tables for a start.

Dan Joyce · Dan Joyce

Great, but then how would you do it?

Thanks everyone for the help. I'm going to try a previous post that gave me
the exact script I need. I'll replace all those text fields like that.
Thanks! I'll get back with how it is. . .

Dan Joyce · Dan Joyce

So, I put this all to the suggestion posted by ScareCrow (or I thought I did):



still no luck in Safari or FireFox. Did I screw it up?

The ScareCrow · The ScareCrow

You have made a few mistakes.

You have td1 defined twice
You have also assigned the incorrect values for the checkboxes.

I have attached a working copy.

Ken

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript">

</script>
</head>

<body>

<form>
<input type="hidden" name="numberOfImages" id="numberOfImages" value="1">
<table id="orderTable" cellspacing="0" border="1">
<thead>
<tr>
<td width="13"> </td>
<td width="71"><div align="center"><strong>pg/pl/fig</strong></div></td>
<td width="202"><div align="center"><strong>Architect, Aritst or Firm
</strong></div></td>
<td width="342"><div align="center"><strong>Project Title / Building Name /
Description / Location </strong></div></td>
<td width="162"><div align="center"><strong>Date</strong></div></td>
<td width="96"><div align="center"><strong>Slide or Digital Image
</strong></div></td>
</tr>
</thead>

<tbody>
<tr>
<td><div align="center">1</div></td>
<td><div align="center"><input name="1PgPlFig" type="text" id="1PgPlFig"
size="10" maxlength="20"></div></td>
<td><div align="center"><input name="1ArchArtFirm" type="text"
id="1ArchArtFirm" size="15" maxlength="50"></div></td>
<td><div align="center"><input name="1Description" type="text"
id="1Description" size="45" maxlength="100"></div></td><br>
<td><div align="center"><strong><input name="1ImageDate" type="text"
id="1ImageDate" size="10" maxlength="10"></strong></div></td>
<td><div align="center">
<input type="checkbox" name="1Slide" value="YES">S
<input type="checkbox" name="1Digital" value="YES">D
</div></td>

</tr>
</tbody>
</table>
</form>
<a href="javascript:addRow('orderTable')">Add row</a>

</body>
</html>

Dan Joyce · Dan Joyce

Scarecrow, you're my hero. Now it works in all three browsers. I just have to
plug in the rest of the page that already works and put in the script to
submit. I can do all of that. THANKS!!!!!!

Dan J.

john_crowley · john_crowley

Thanks to everyone whop responded to this query. I came across it while looking
for an answer to a similar question I've been assigned..

If I wanted to add two rows at a time (e.g., instead of having six columns in
the example, there were two rows of three columns) , what changes to the
javascript code would be required? Obviously, I'm a newcomer to javascript, and
any help would be greatly appreciated.

The ScareCrow · The ScareCrow

Sorry Dan, I did not get an email to let me know a post had been made.

If you need to start from zero, just set the form field to zero

<input type="hidden" name="numberOfImages" id="numberOfImages" value="0">

John,
So, I assume you want to add 2 rows of 3 columns each time ??

Then

This adds the row, so for each row just give the var a different name
var row = document.createElement("TR");

The columns are then added to the row by
row.appendChild(td1);

So to do what you want to do, all you need to do is add the row right after
the first row
var row1 = document.createElement("TR");

Then change the following
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);

To
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row1.appendChild(td4);
row1.appendChild(td5);
row1.appendChild(td6);
tbody.appendChild(row);
tbody.appendChild(row1);

Ken

Dan Joyce · Dan Joyce

Thanks for the response, but I have that solution in there already. The image counter should be resetting. Any idea why it doesn't?

Thanks
Dan j.

The ScareCrow · The ScareCrow

Dan,
The following line should reset the variable (to the value in the hidden form
field) each time the function is executed
var imageCount = parseInt(document.getElementById('numberOfImages') .value) + 1;

When the page is loaded this form field should have the default value (1, 0,
ect..)

So, I'm not sure why it is not. But you could try the following:
Declare the variable outside the function, like so

var imageCount = 0;
Then change the following line
var imageCount = parseInt(document.getElementById('numberOfImages') .value) + 1;

To
imageCount = parseInt(document.getElementById('numberOfImages') .value) + 1;

It also might be an idea to change the hidden form field to text, so you can
see it in the page. Then reload the page to ensure that the correct value is
being loaded.

Ken

john_crowley · john_crowley

Thanks Ken -

It's working well, but I do have one last question. If I wanted to have a
field name in the first column (.e.g, "Name"), and then have it update each
time a new row is added (e.g., "Name2", "Name3", etc.), how would I go about it?

Again, thanks for the help on this.

Dynamic table rows

Thread Tools

Display

Dynamic table rows

Similar Questions and Discussions

#25473 [Opn->Bgs]: Updating single row in table causing all rows in table to be updated.

#25473 [Fbk->Opn]: Updating single row in table causing all rows in table to be updated.

#25473 [Opn->Fbk]: Updating single row in table causing all rows in table to be updated.

#25473 [Opn]: Updating single row in table causing all rows in table to be updated.

#25473 [NEW]: Updating single row in table causing all rows in table to be updated.

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Re: Dynamic table rows

Posting Permissions