How to align form fields within a table for inline editing?

Question

I am developing a webapp using Spring, jsp, javascript, jquery.

I display a table using datatables. When I click on a table row I want it to change all fields to an inline edit inputs, selects etc. In addition I want to show some extra input fields in the next row and a save button.

Now I see several ways of doing this. I am not sure which one to take.

1. I can get a handle to selected row and then iterate over the td and transform them to input/select fields. I can then insert an extra row for the new fields and the save button. I don't see this as a clean solution. I will have to issue a Post manually instead of using the Spring ModelAttribute binding for the form. (Can I still use ModelAttribute here?)

2. I can create an edit form in a jsp file which looks like:

   <form:form action="" commandName=""> <td> <input ... > </td> <td> <select ... > </td> </tr> <tr> <td> <label> <input new field> </td> <td> <button> </td> </tr>

Note I do not have a beginning in a jsp file as I plan to reuse the tr from the existing row in the table. This way I would be able to have a clean form and also use the update method I have already written which binds the form to a Java class. Also I do not have to bother about the alignment of input fields with the column names.

The generated html looks like ...

The problem with this approach is the placement of form element in the html causes the entire form to be cramped into one cell of the table which does not look good and messes up the whole layout. Is there a way out? Should I just replace the contents of the table with a having a colspan and then put divs inside this element and fine tune the css to ensure that the input fields align with the column names in the table?

Is there a better solution you can suggest? In case the question is not very clear I can fill in more details.

Answer 1

This is what I would do (coming from a server-side development background, as I know developers love easy solutions)

1. Wrap the table with a single form
2. on Edit row (clicking row) open an ajax request that returns pure html that looks like the exact tr, only with whatever extra you want to include:

---

<tr><td><input type="text" name="text1" ... /></td><td>second row... </td></tr>
<tr><td colspan="2">And hey, here is more, and the save button ... </td></tr>  

---

1. in jQuery replace tr with content retrieved (myTr.replace($(ajaxResponse))) or something similar

2. now Save button is a regular submit for the form

3. if you want to submit via ajax, once done, return the old html in your ajax response and replace the two trs with the old tr (you just need to hook it by giving new trs an attribute that you can find easily in jquery)

4. don't forget to switch off a global key to prevent double editing, users can edit one row at a time

---

Update: adding a second solution to dump load on client instead of server

To avoid overloading the server (though I wouldn't be worried about it until it becomes a regular habit), you can make your form fields as a template inside your HTML and use string replacement (or jQuery Templates), so instead of ajaxing to get response in step 2, you call the template, and replace the strings with attributes you save in every row... like this:

<div id="myTemplate"> // or you can use jQuery script templates
    <tr><td><input type="text" name="${Name}" ... /> id is ${Id}</td><td>${SecondRow}... </td></tr>
    <tr><td colspan="2">Save button here.... and may be more text ${MoreText}</td></tr>  
</div>

in every row in your code add sufficient attributes or ids to know what you want to replace with, like this:

<tr data-itemid="34"><td ><input type="text" name="text1" id="findme" ... /></td><td data-moretext="here is more text">second column </td></tr>...etc

so now in your replacement script:

$("#myTemplate").html().replace("${Name}", $(thisrow).find("#findme").attr("name"))
    .replace("${Id}",$(thisrow).attr("data-itemid"));

etc...

Of course after submission it has to be a to server, but in case user "cancels" you can have another readonly template

By the way, that is the way I usually go with, I use jQuery templates, and create edit and view templates, but I also repeat edit forms and I use jQuery ajax submit manually... but that... my friend, is not a simple clean and maintainable solution I'm afraid