Question

I have a table with three columns, and two cells contain select boxes with a list of 10-20 values. Something like this:

| USER    | MANAGER            | DEPARTMENT   |

| Rob     | [John Smith |V]    | [Sales |V]   | 

| Sue     | [Bob Jones |V]     | [Support |V] |

The page is a JSP so I’m building the select box contents with a for loop. All “Manager” and all “Department” lists contain the same items.

I also have “Add New Row” link. I know how to use Javascript to add a new row to the table, like so:

var table = document.getElementById("myTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

and I know how to add the right ‘html’ to the new row, like so:

var cell0 = row.insertCell(0);
var element0 = document.createElement("span");
element0.innerHTML = 'Hello';
cell0.appendChild(element0);

… and so on.

My problem is that my table rows have a lot of HTML (because there may be many values in each select box).

What’s a good way to approach this problem? How should I add my new rows?

Any suggestions are greatly appreciated!

Thanks, Rob

UPDATE

It occurs to me that I could write a “addNewRow” servlet that accepts all the data on the form, turns it into the Java list, adds the new item, then redirects back to my page with the new value in the table. That might be easy.

The only problem is the web page would reload on every “add new” click.

Answer 1

You could clone one of your existing rows and simply edit the items you need to