addinstance to middle of table in javascript




I am trying to insert a new row into the middle of a table in javascript. Adding to the end of the table is easy, but I can't seem to figure out the syntax for inserting into the middle. I'm spent hours trying to come up with something.

Since adding to the end of the table is:


It would be nice if I could using something like:







That syntax is correct but if you are trying to add to the middle of the table then detail[5] probably already exisits.

What if you added a new row to the end of the table then used the moveInstance method to reposition it where you want. It is documented on the scripting reference.



I've been looking around for a solution myself, and have combined a few different methods and managed to work it out using a form variable and insertInstance() to insert a table row above the table row with current focus. I chose this method as I only wanted the one button on the form due to space limitations instead on having a button on each row, like with the 'Delete' row example on the Purchase Order sample.

Step 1 - Create a form Variable {File:Form Properties:Variables}, lets say 'nIndex' and assign it any number.

Step 2 - I added the following Javascript to the first row/ first column of my table on the 'Enter' event:


     var xxx = this.parent.index;

     nIndex.value = String(xxx);

If necessary this could be repeated for each row in the table.

Step 3 - I added a button to the form, basically anywhere will do, called lets say 'Insert Above' with the following Javascript on 'Click' event:


The '_' following the first period(.) is required.


I am using my form to document User Acceptance Test Script steps and needed the capability for the user to insert new steps as the script is being developed.

I also have another button 'Add Steps' which uses addInstance() to allow the user add rows to the bottom of the table for new steps.

NB: The same logic works for removeInstance to delete the row in the table with current focus.