JavaScript dynamic table using a table row template

how about append the table row just like you are but do it by

function addTableRow(num) {
            // add new table row to dynamic table
            var tr = document.createElement('TR');
            tr.setAttribute( 'id', 'dynamicRow' + num );
            tr.innerHTML = template.replace("#", num);

            $('dynamicTable').appendChild( tr );
           
      }

where the template is just all the stuff inside the tr.
or:           <td name="glassNum">Glass Number</td>
            <td><select name="type#"><option>Select Glass</option></select></td>
            <td><select name="design#"><option>Clear - No Design</option></select></td>
            <td><input name="width#"></td>
            <td><input name="height#"></td>
            <td><input name="price#" disabled></td>

and if '#' could show up elsewhere in this, a little regex magic to .replace(/type#|design#|width#|height#|price#/, num);

The problem I having with this soultion is that I get an error message

" Object does not support this property or method"

which is generated from the replace("#",num) in

 tr.innerHTML = template.replace("#", num);

is there something obvious I'm missing?

how about this, I tried this in IE7, and it appears to work ok. don't know about other browsers.

var template1 = "<select name=\"type#\"><option>Select Glass</option></select>";
var template2 = "<select name=\"design#\"><option>Clear - No Design</option></select>";
var template3 = "<input name=\"width#\">";
var template4 = "<input name=\"height#\">";
var template5 = "<input name=\"price#\" disabled>";

function addTableRow(num) {

    var tr = document.createElement('TR');
    tr.setAttribute('id', 'dynamicRow' + num );

    var td = document.createElement('TD');
    td.innerHTML = "Glass Number";
    tr.appendChild(td);
       
    td = document.createElement('TD');
    td.innerHTML = template1.replace("type#", "type" + num);
    tr.appendChild(td);

    document.getElementById('dynamicTable').tBodies[0].appendChild(tr);
   
}

for some reason, setting the innerHTML of a tablerow, does not work like it seems it should, for some reason, the starting "<td>" tag is not being rendered properly, probably something I'm missing, but setting the innerHTML of a table cell, seems to work without issues.

I just did the first select for you, I think you can handle doing the rest...this is not really a lot different than you had above, except putting the selects into a variable seems a little easier to read and understand.

This is similar to my first version.  It works for static select lists. The problem is that the templates are defined in the head of the page, and can’t be loaded with php to define the select list on page load.  If the template definitions are moved into the body then they are undefined for the function.

I don’t know away around this issue, so I have been trying to understand what is happening in this approach.

      function addTableRow(num) {

            // add new table row to dynamic table
            var tr = document.createElement('TR');
            tr.id = 'dynamicRow' + num;
            tr.setAttribute( 'id', 'dynamicRow' + num );
            
            tr.appendChild( createTableCell( num ) );
            tr.appendChild(type);      //  "type" is the id of the first cell with first select list of my tempalte

$('dynamicTable').appendChild( tr );

The first time the function is called a new row is added to the table, the first cell shows the value of num (1) and the select list shows in the second cell.  The select list is defined by php on the page load.  Looks good so far.

The second time the function is called and new row is added to the table, the first cell shows the value of num (2) and the select list shows in the second cell. The select list is php loaded on the page load.  The problem is that the select list from the first row has vanished.

I’m thinking that if I reset the attributes of the cells after the row is created that the cell contents will stay in place because they then take on their own identity.

What do you think?

doesn't make sense to me, but... then a lot of things don't :)

what does the createTableCell method do?

It seems likely to me, that there is probably something wrong with that method, maybe... that it is creating a table cell on the first time, and then moving it on calls after...might help to see that code, or maybe the whole page's code.

I am not a php person, so I don't know what it can/cannot do, but it seems like an awfully big limitation if you can't dynamically write content unless it is within the html body. so I'm guessing that I'm not understanding what you're saying in your first paragraph.

I’m no expert here but this is, as I understand it.  Php is server side code. This means that it is run on page load.  Java Script is client side code run by the client’s browser. I can populate the select boxes in Java Script, but it will be hard coded.  I can’t use php in the Java Script function because it won’t be evaluated on page load.  In this case I need to populate the select list on page load, which means the template need to be in the body of the page.

This is the table template I have located in the body of the page.  I have found that I can call the complete row by its' id and append it to the dynamic table.  When I add the second row the first row disappears.  The cell contents only show in the last appended row.  I gave an id tag to the first select to verify that it can be appended to the row, and it works the same way.

<tr id="dropdownTemplate">
            <td name="glassNum">Glass Number</td>
            <td id=”type”><select name="type#"><option>Select Glass</option></select></td>
            <td><select name="design#"><option>Clear - No Design</option></select></td>
            <td><input name="width#"></td>
            <td><input name="height#"></td>
            <td><input name="price#" disabled></td>
      </tr>

This is the function to add a row, number the row, and append a cell with the first select box.

function addTableRow(num) {

            // add new table row to dynamic table
            var tr = document.createElement('TR');
            tr.id = 'dynamicRow' + num;
            tr.setAttribute( 'id', 'dynamicRow' + num );

$('dynamicTable').appendChild( tr );

            
            tr.appendChild( createTableCell( num ) );
            tr.appendChild(type);      //  type is the id of the cell of the first select list
}

      
I’ve been trying to change the name of the select list from “type” to “type”+num  on the append, but I keep running into the error     “object does not support this property or method”
I’ve tried to use “setAttribute” after the cell is appended without any luck.

As in your test case when the template is declared in the head of the page the dynamic table append works fine.  So there is a difference between the select list located in the body of the page and called using the id tag and select list defined in the head of the page.  I'm going around circles.  Do you have any ideas?  

ok, you're right, php is server side code, and javascript runs on the client,
but ... that does not mean that you can't create stuff on the server that the client can use.

but, it appears that, from my debugging, that the problem is not with your template, but with using it as one.

when I set the innerHTML of the table row, it just doesn't work like it should, and I don't know why, but when I set the tr.innerHTML to the innerHTML of the template, it, for some reason I have no frickin' idea why, removes the opening <td name="glassNum">.....
and actually sets the innerHTML starting from "Glass Number</td>
or, in other words, I would expect it to look like
tr.InnerHTML = "<td name="glassNum">Glass Number</td>.....
but it actually looks like
tr.InnerHTML = "Glass Number</td>.....

so it just isn't working, and I don't know a way to make it work

I guess that is where I'm confused, why, could you not use my code?

or, let me see what createTableCell() looks like, or more of the page's code, I'm guessing you're using soemthing like prototype, or another variant of it since I see the $(), with more of the code, I may be able to debug better...

that, or just go this way, build up prototypes of the selects like I did, into a string variable, and use them.

<script>

var template1 = "<select name=\"type#\"><option>Select Glass</option></select>";
var template2 = "<select name=\"design#\"><option>Clear - No Design</option></select>";
var template3 = "<input name=\"width#\">";
var template4 = "<input name=\"height#\">";
var template5 = "<input name=\"price#\" disabled>";

function addTableRow(num) {

    var tr = document.createElement('TR');
    tr.setAttribute('id', 'dynamicRow' + num );

    var td = document.createElement('TD');
    td.innerHTML = "Glass Number";
    tr.appendChild(td);
       
    td = document.createElement('TD');
    td.innerHTML = template1.replace("type#", "type" + num);
    tr.appendChild(td);

    td = document.createElement('TD');
    td.innerHTML = template2.replace("design#", "design" + num);
    tr.appendChild(td);

    td = document.createElement('TD');
    td.innerHTML = template3.replace("width#", "width" + num);
    tr.appendChild(td);

    td = document.createElement('TD');
    td.innerHTML = template4.replace("height#", "height" + num);
    tr.appendChild(td);

    td = document.createElement('TD');
    td.innerHTML = template5.replace("price#", "price" + num);
    tr.appendChild(td);

    document.getElementById('dynamicTable').tBodies[0].appendChild(tr);
   
}
</script>

I've tested this, and I know it works... so that's something you should be able to work with...

I started with this approach.  I built up the full table, and populated the selects lists in the function. Everything worked fine until I found I needed to change the select list based on some outside conditions. When I'm calling the page I am passing a parameter in the URL to do a sort on the database and populate the select list on page load.

·      If the template is built in the head of the page I can’t load it up with php.  This does not solve my problem. Here is a test page. Click on the grid to fire the function.  You can see that we are adding to the table, but I can't dynamiclly populate the select list from the head of the page.
 
Test page:  www.glassdivider.com/W2-test-head-temp.php


·      If I use a template built in the body I can populate the select dynamically with php. I am adding the cell calling it by the id tag.  Click on the grid in this example and you can see it add a row to the table. Check the select box and it is populated using php. Now click the grid again.  The select box of the first row vanishes and the second row shows.  I’m assuming that this has something to do with the fact that I haven’t changed the identity of the cell.  I have played around with setAttribute , but keep getting the error  “Object does not support this property or method”.

Test page:  www.glassdivider.com/W2-test-body-temp.php


There must be a way to pull something from the body of the page and be able to change the attributes.

ok, sorry, maybe I'm just being overly dense, but I'm still not clear on why it has to be one or the other???
why could it not be both?
or why not a combination?

Do you need to populate some selects on the server, like for maybe an existing piece of work, and be able to add rows on the client? either to an existing piece of work in progress, or to a new one?

in that case, why could you not build the templates for existing rows on the server within the php code, and also build the template to be used on the client in the head? using the same source, but useable in both server and client

in asp code, I'd build up a select in server side code, and be able to write it out to the client, as well as use it on the server.

I'd build a server side method to create the html, and then write it out as many times as needed on the server, and also write the template out in the head to be used by client side code. does this make any sense, or am I just completely being dense???

create a variable in the server, that contains the select html

var someserversidevariable = build_select()
where it builds a generic select.
<select name="type#" id="type#">
<option value="1">1</option>
...
</select>

in the head I'd just write it out
var typeselecttemplate = " + someserversidevariable + "

And in the body, for existing rows, I'd use it just like I would on the client, but in server side code, in php I have no idea, but just print it out replacing 'type#' with 'type' + num on the server.

this way, you can use the same template on the server AND the client. or this not at all what you need?

Let me just describe what I need to accomplish.

I’m building an order form, which can be used with a verity of different product-lines.  Each product-line has it’s own options which I want to let the user specify.   In this application I need to dynamically load the select lists with the product-line options. The product-line is identified before the page loads.  All of the options, engineering limits,  and pricing information is held in a mySQL table.  This allows me to easily make changes.  

The customer clicks on the layout grid to indicate where he wants a glass panel.  The glass panels are numbered, and a corresponding row is added to the table.  The cells in the table row need to be renamed as the table is built so that there is a one-to-one relationship between the glass panels and the table cells.

I can’t use the example where the select list are defined in the head of the page because I can’t use php in this area of the page.  I could hard code the select boxes for each product-line.  Not a pretty picture having a page for each product-line, and having to recode the page for every product line change.

If I call the template from the body of the page I can use php but I can’t change the attributes of the cells.   I must be doing something wrong by just calling it by the id tag.

tr.appendChild(type);      

I think maybe a php expert would be more helpful, I don't know, but I find it hard to believe you can't write anything you want to the head section, but, I'm an asp guy, not a php guy.

and without seeing all the code, I don't what 'type' actually is...

so.....
anyway, would putting just the template selects into hidden div's in the page work?
then you'd have

<body>

....all your other stuff....

<div id="template1" style="display:none;">
<select name="type#" id="type#">
....options here....
</select>
</div>

and then, in my function, just change this bit to something like:
       
    td = document.createElement('TD');
    td.innerHTML = document.getElementById("template1").innerHTML.replace("type#", "type" + num);
    tr.appendChild(td);

????

when I run your code, and look in the DOM explorer, I see it adding multiple TBODY elements, I think one thing to try, maybe before anything, is just to change your code where you add the row to the dynamicTable, to
document.getElementById('dynamicTable').tBodies[0].appendChild(tr);
or, using the $ function
$('dynamicTable').tBodies[0].appendChild(tr);

Ok – All of these act the same:

              $('dynamicTable').tBodies[0].appendChild(tr);

            document.getElementById('dynamicTable').tBodies[0].appendChild(tr);

            $('dynamicTable').appendChild( tr );

I inserted this code to verify that I am changing the cell id.

tr.appendChild( createTableCell( num ) );
            tr.appendChild(type );    // type is the id of the cell with the 1st select list
            tr.firstChild.id = 'glass' + num;
            window.alert('The value of the \'tr.id\' attributi is: '+
            tr.getAttribute('id') );

            window.alert('The value of the \'id\' attributi is: '+
            tr.firstChild.getAttribute('id') );


1st function call
      tr.id= dynamicRow1
      tr.firstChild.id = glass1

2nd function call:
      tr.id = dynamicRow2
      tr.firstChild.id = glass2

This all makes since, but if I try  

window.alert('The value of the \'id\' attributi is: '+
            tr.type.getAttribute('id') );

I get an error of “ ‘type’ is null or not an object”
This looks like when I do the append of the template using the id tag I am not really appending the cell to the row.

I don't understand how I can do the append and not be able to see it as an object.

If I change from

what is 'type'?
where is that coming from?

are you trying to access the type select?

that won't work...you can't access the select directly from the tr.

you could do something like
 alert(tr.getElementsByTagName("SELECT")[0].id);

This is my template located in the body of the page. "type" is the id tag for the cell of the first select list.  I have loaded the select list using php to confirm it works.

<div id="dynamicDiv">
<table id="dynamicTable2">
   # in the following TR will get replaced with the respective glass #
   <tr id="dropdownTemplate">
   <td id="glassNum"><input name="glass#"></td>
   <td id="type"><select name="name#" class="style15"><option value="Pri_group">glass</option>
        <?php
      do {  
         ?>
  <option value="<?php echo $row_glass['Name']?>"><?php echo $row_glass['Base_Price']?></option>
        <?php
            } while ($row_glass = mysql_fetch_assoc($glass));
            $rows = mysql_num_rows($glass);
            if($rows > 0) {
                  mysql_data_seek($glass, 0);
              $row_glass = mysql_fetch_assoc($glass);
                   }
                  ?>
            </select></td>
                 <td id="design"><select name="design#" class="style15"><option>Clear - No                          Design</option></select></td>
      <td id="width"><input name="width#" class="style15" size="8" maxlength="8" onBlur="price_no.value=(width_no.value*height_no.value/144)"></td>
      <td id="height"><input name="height#" class="style15" size="8" maxlength="8" onBlur="price_no.value=(width_no.value*height_no.value/144)"></td>
      <td id="price"><input name="price#" class="style15" size="8" maxlength="8" ></td>
      </tr>
</table>

<table id="dynamicTable">
      <tr>
                                 <td width="40" class="style14"><div align="left">No.</div></td>
                                 <td width="150" class="style14"><div align="center">Glass Type</div></td>
                                 <td width="150" class="style14"><div align="center">Design</div></td>
                                 <td width="40" class="style14"><div align="center">Width*</div></td>
                                 <td width="40" class="style14"><div align="center">Height**</div></td>
                                 <td width="50" class="style14"><div align="center">Price</div></td>
                                                 <td width="15" class="style14"><div align="center">X</div></td>
                                                 <td width="15" class="style14"><div align="center">Y</div></td>
                               </tr>
</table>
<p class="style14">* Width: Enter the post center to post center distance. </p>
<p class="style14">** Height: Enter the height from the bottom of the post to the top of the
  glass. </p>
</div>

I'm trying to understand why the select box show only in the current append row.  I need to give each item in the table its own name.

Hi jws2bay,
Have u solve it yet? If not let's get to it.
First, let's understand your requirement:
1. You have a webpage with grid menu items
2. when menu item clicked, without refreshing / reloading the page, additional input options will be made available to the user (in your case, selection lists within table rows)
3. the additional input options are corresponding to the clicked items which are different from one another.

If that's what you wanted, I can think of 2 possible ways:
1. The easier (which you should have know, but didn't aware of),
   you stated b4 that " I have verified that with a little php I can populate the select list as needed. I can insert the template, but I haven’t figured out how to change the names so that each row represents the num object. I probably shouldn’t insert it, but should clone it, rename it, and then insert the clone. Need a little direction here."

   The missing part on that was the mapping between menu items and templates. Though, steveberzins did post a better way for the template to be declared as Javascript variable.
   OK, the missing part is to make use of ids; Now, depending on how you want form inputs to be submitted, you may need 2 sets of ids (1 set for item to template mapping, the other for user input sequence)

   the 2nd set of ids are useful if you allow user to alter their inputs (for table row removal, etc). That also affect how you pick up $_REQUEST["??"] later.
   the following Post: sample of how things work (if I interpret u correctly)

2. The second way is having a hidden iframe to submit the have the respond from iframe to call the current page Javascript (virtually no screen refreshing). If you find the first suit you, It's more complicated and require more try and catch and timer to capture time out, etc. So, let's not mess up anything for now.

<html>
<head>
<script language="JavaScript">

var template1 = new Array();
template1[0] = "<select name=\"type#\"><option>Select Glass</option></select>";
template1[1] = "<select name=\"design#\"><option>Clear - No Design</option></select>";
template1[2] = "<input name=\"width#\">";
template1[3] = "<input name=\"height#\">";
template1[4] = "<input name=\"price#\" disabled>";

var template3 = new Array();
template3[0] = "<select name=\"type#\"><option>Select Glass</option></select>";
template3[1] = "<select name=\"design#\"><option>Clear - No Design</option></select>";
template3[2] = "<input name=\"width#\" value=\"10\">";
template3[3] = "<input name=\"height#\" value=\"3\">";
template3[4] = "<input name=\"price#\" disabled>";

var dyna_Row_Count = 0;

function addTableRow( clickedID ) {

    if ( document.getElementById( "Row" + clickedID ) != null ) return;

    var tr = document.createElement( 'TR' );
    ++dyna_Row_Count;
    tr.setAttribute('id', 'Row' + clickedID );
    tr.setAttribute('index', dyna_Row_Count );

    var td = document.createElement('TD');
    td.innerHTML = "Glass Number";
    tr.appendChild(td);

    for ( i=0; i<eval("template" + clickedID).length; i++ ) {
        td = document.createElement('TD');
        td.innerHTML = eval("template" + clickedID)[i].replace("#", dyna_Row_Count);
        tr.appendChild( td );
    }

    document.getElementById('dynamicTable').tBodies[0].appendChild(tr);
}

</script>
</head>
<body>
<table width="100%" border=1><tr>
<td><table><tr><td>Menu ITEM</td></tr>
<tr><td><a href="JavaScript:addTableRow( 1 )">Item A</a></td></tr><tr><td><a href="JavaScript:addTableRow( 3 )">Item B</a></td></tr></table></td>
<td>Additional Option
<table id="dynamicTable">
</table></td></tr></table>
</boby></html>

Try the html and if the result is something like what you wanted,
the php should populate the template like following (within script tag):
...<head>
<?php
do { .....
echo "var template".$row_glass[??];
echo "template"..$row_glass[??]."[0] = \"......\"";
....}

Your Question:
"I'm trying to understand why the select box show only in the current append row.  I need to give each item in the table its own name. "

If you can show me the result html of the page (not php source), I can tell you the answer to that.
And, I can see your concern about getting input names for $_REQUEST["??"]. If you use sequence number, you may run loop with IsSet( $_REQUEST["??" + seqNo] ).
Or, if you want to have some meaningful naming convention, you may have some hidden fields to store names of dynamically created fields. Let me know if you require elaboration on those.

Hi vevex,

A little background.  Shown below is my current code.  It works fine except for two things.

1) I need to populate the select list using php on page load.

2) I need to rows in sequential order. Right now if you have three items you have three rows
numbered 1,2,3.  If the second item is removed the table has two rows 1,3.  If an additional two items are added my current table will be numbered 1,3,2,4.  I would like this to be reordered to be 1,2,3,4.


My current solution:

function addTableRow(num) {
            // add new table row to dynamic table
            var tr = document.createElement('TR');
            tr.id = 'dynamicRow' + num;
            tr.setAttribute( 'id', 'dynamicRow' + num );

            tr.appendChild( createTableCell( num ) );
            tr.appendChild( createTableCell( '<select name="type'+num+'" class="style15"><option>Slect Glass Type</option></select>' ) );
            tr.appendChild( createTableCell( '<select name="design'+num+'" class="style15"><option>Clear - No Design</option></select>' ) );
            tr.appendChild( createTableCell( '<input name="width'+num+'" class="style15" size="8" maxlength="8" >' ) );
            tr.appendChild( createTableCell( '<input name="height'+num+'" class="style15" size="8" maxlength="8" >' ) );
            tr.appendChild( createTableCell( '<input name="price'+num+'" class="style15" size="10" maxlength="10" align="right" value="0.00">' ) );

            $('dynamicTable').appendChild( tr );
      }
      

Your faster than I am.

 I had it stuck in my head that the template had to be pulled in from the body of the page if I was going to load the select list using php.  If I understand you correctly this is wrong.  I can build the template using php outside of the function but still located in the head of the page.

Let me try this out.

Ok, about Q1, and u mentioned
" ... the template had to be pulled in from the body of the page if I was going to load the select list using php.  If I understand you correctly this is wrong.  I can build the template using php outside of the function but still located in the head of the page."

There's no nothing wrong with having the template in the html body as long as you can use them the way you wanted. Just that I though putting in Javascript variables made them easier to be managed programatically.

I saw your code
do {  
         ?>
  <option value="<?php echo $row_glass['Name']?>"><?php echo $row_glass['Base_Price']?></option>
        <?php
            } while ($row_glass = mysql_fetch_assoc($glass));
            $rows = mysql_num_rows($glass);
            if($rows > 0) {
                  mysql_data_seek($glass, 0);
              $row_glass = mysql_fetch_assoc($glass);
                   }
I don't quite the reason to have the those few lines after the loop condition. I can't tell much having to just look at part of your program. Though, I thought
<?php while ($row_glass = mysql_fetch_assoc($glass)) { ?>
    <option value="<?php echo $row_glass['Name']?>"><?php echo $row_glass['Base_Price']?></option>
<?php } ?>
would be sufficient...
------------------------------
Ok back to Q1... (I assume you refer to populate template within the javascript function). Well, since you may have your "near to complete functioning" code already, I would not advise you to change that part.
But since it's been point out....
For the understanding, var template?? will create template array corresponding to id of menu items. Each array element of a template?? keeps corresponding html script for individual table cells.
So, in my DB, for example:
     * 2 menu Item with IDs (1 , 2)
     * menu Item 1 has 2 selection lists (type and design)
     * menu Item 2 has only 1 selection lists (dimension)
     * menu Item 1 default width is 3, height is 10
     * menu Item 2 default width is 4 (no height)
I assume the input elements associated to the individual menu Items are indicated in database values. So,
....<head><script language="JavaScript">
<?php while ($row_glass = mysql_fetch_assoc($glass)) {
        $tempCounter = 0;
        echo "var template".$row_glass['ID'] = new Array();
       if ( $row_glass['type'] != false ) {
            echo "template".$row_glass['ID']."[".$tempCounter++."]" = "<select name=\"type#\">";
            //may query for type and populate options associated to current row_glass record
            echo "</select>";
       }
       if ( $row_glass['design'] != false ) {
            echo "template".$row_glass['ID']."[".$tempCounter++."]" = "<select name=\"design#\">";
            //may query for design and populate options associated to current row_glass record
            echo "</select>";
       }
       if ( $row_glass['dimension'] != false ) {
            echo "template".$row_glass['ID']."[".$tempCounter++."]" = "<select name=\"dimension#\">";
            //may query for dimension and populate options associated to current row_glass record
            echo "</select>";
       } //.... same goes for other possible input elements
.} ?>
function addNewRow( num ) {....)
------------
Hope this can be of use.

just a suggestion, now you have someone with some clue about php, let them help you a step at a time...you don't build a building all at once, same goes for a complex html page.

and two, if rows can be removed, if this were me, I'd give up on the whole setting of IDs on the inputs.... that just seems to add a whole mess of complexity, that can be handled better by not worrying about it....

Just build up each table row, using the same id, and handle them positionally, in the client you can access them by index, and when submitted, you get a bunch of comma delimited values, so, the only tricky part about it is, in the client, whether you have one row in the table, or more than one rows. having to track ids, and change them if a row is removed, and add them keeping track of what you have, what a mess....why not avoid it???

Hi steveberzins,
About input with same names and values submitted delimited by commas, it worked for ASP, C#, and Cold Fusion (haven't try JSP though). I really hope it worked for php. But, believe me, it does not.... Too bad.... : (

I would not know, wish I did know more about php, but what I do know, you can fit into about three letters, I know it is spelled php!!! :)

anyway, that bites....but... then I'd build it myself.... on submit, put the values into a hidden field to simulate it, be easier than dealing with the id mess. :)

Not quite, I thought about that once when I need that the most (I was very used to ASP b4 php). Turn out, it's almost the same. you either deal with the mess on client side scripting with is Javascript or VBScript; or deal it on server side... you have to deal with it anyhow. Think about it, it's still dynamically generated... you still pick them up one by one and join them, putting in your delimeter... not much diff than the server side... I did that b4.

six of one, 3.5 of the other.... :)

I'd still argue that some generic looping code, that iterates over a set of controls, and pulls the values together, and the matching server side to pull them back out into an array, is much simpler than javascript dealing with various flavors of id manipulation on the client... etc. etc. but, I'll leave that fun to you guys... I'm just glad someone that knows php came along that can help him with both sides of this fabulous page ordeal. ;)

I was really stumbling over a couple issues.  I've got the function working just like I wanted.  The dynamic table builds like it should and stays ordered.  I also have the select list populated from php.

You Guys are Great!