How to create dynamic row of table using Struts 1.3 and javascript

I have a contact table, this table contains a first name, a last name, and multiple phone numbers. So my model is something like



    Contact {
    String firstName;
    String lastName;
    List phones;
    }

    Phone {
    String category; //home, work, mobile, etc
    String phoneNumber;
    }

So it will have web page contains two input text for first name and last name, and an add phone button. When add button is clicked, it will generate two input text again for category and phone number, and an delete button to that row.

I have tried using indexed=true, it will generate an html like

<input type="text" name="phone[0].category" ... />
<input type="text" name="phone[0].phoneNumber" ... />

The problem is, i dont know how to write the javascript, because i dont know what is current index if user click add button, how about if user have clicked delete button and then add button, what index it will be? It is ok if i have missing index? Something like

<input type="text" name="phone[0].category" ... />
<input type="text" name="phone[0].phoneNumber" ... />
<input type="text" name="phone[3].category" ... />
<input type="text" name="phone[3].phoneNumber" ... />

Note: please consider for the edit scenario too.

Solution

The first thing here is to use well the indexed and logic:iterate tags to generate the code. If having doubts about this, check out this answer given by me, which explains in detail how to use indexed attributes in struts: indexed and logic:iterate

Then, you have to consider the scenario where an user wants to add or delete rows, and update indexes correctly so struts will be able to retrieve data as you submit the form. I encountered this problem once and what I did was:

on add: using javascript, find out what is the last line of the table and, by looking at the generated code of the page, generate a new table row with empty contents, the index inside the square brackets. Finally, add to table

EXAMPLE:

a table:

<table><tr><td name='whatever[0].something'>asdf</td></tr>  
<tr><td name='whatever[1].something'>asdf</td></tr>
<tr><td name='whatever[2].something'>asdf</td></tr>
</table>

to add a row, create it in javascript like this:

var newRow = '<tr><td name='whatever[3].something'>asdf</td></tr>

and append it to the table.

on del:Using the same technique as above find out which line (or corresponding index) was deleted. Then, edit the indexes of the remaining rows so that it matches the order of elements for the subsequent rows.

EXAMPLE:

a table:

<table><tr><td name='whatever[0].something'>asdf0</td></tr>  
<tr><td name='whatever[1].something'>asdf1</td></tr>
<tr><td name='whatever[2].something'>asdf2</td></tr>
</table>

let's say you delete asdf1 by removing it from the dom. then, the new table will look like this:

<table><tr><td name='whatever[0].something'>asdf0</td></tr>  
<tr><td name='whatever[2].something'>asdf2</td></tr>
</table>

now we have to update indexes so it matches the right order, by changing the name of the second td to have an index of 1, that way, the table is back to a struts indexed format:

<table><tr><td name='whatever[0].something'>asdf0</td></tr>  
<tr><td name='whatever[1].something'>asdf2</td></tr>
</table>

I hope it's clear enough. I obviously can't write all the js functions, since they require some work, but with this information you can make it on your own.