how to add a complex table row with javascript?

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.

With your servlet idea you could do the work over ajax – Hailwood Jun 19 '12 at 08:36 — Hailwood, Jun 19 '12 at 08:36

score 0 · Answer 1 · answered Jun 18 '12 at 19:30

You could consider a templating solution - I'm a big fan of Mustache.js. It allows you to write your HTML in one separate file, and pass an object literal to the template engine that will render all your table rows in a loop for you.

You could have a template like so (just making it up):

{{#person}}
<td>
    <h2 class="jobTitle">{{jobTitle}}</h2>
    <span>{{name}}</span> - {{age}}
</td>
{{/person}}

Pass it an object literal of person objects, each with a jobTitle, name and age property, and it will do the rest for you.

score 0 · Accepted Answer · answered Jun 18 '12 at 19:35

0

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

answered Jun 18 '12 at 19:35

Hailwood

89,623
107
270
423

Ooo ... that sounds cool. Any pointers on how to clone a row in Javascript? I'll google now, but if you have any links or sample snippits, let me know. – Jun 18 '12 at 19:36
Found this: http://stackoverflow.com/questions/1728284/create-clone-of-table-row-and-append-to-table-in-javascript -- not really sure it's how I want to go yet. But a nice lead! – Jun 18 '12 at 19:37

PhillipKregg · Answer 3 · 2012-06-18T20:17:40.807

It sounds like the problem is not only creating rows, but that you want to clean up the html so that the select options are not cluttering up everything - if I'm understanding correctly.

Have you tried separating the options into a JavaScript array?

You can do this with JavaScript alone, but if you are using a JavaScript library that offers databinding - like KnockoutJS, AngularJS, or Ember - than you can do this very easily. Plus it will help you with other separation of concerns issues.

Most of them also come with a templating solution - this would definitely help when it comes to creating tables.

Knockout has a foreach binding that you can use to generate rows with:

<tbody data-bind="foreach: people">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
        </tr>
    </tbody>

Here's a link to an example: http://knockoutjs.com/documentation/foreach-binding.html

In case you haven't tried this before, I made a super simple example of binding a select box with KnockoutJS in JSFiddle: http://jsfiddle.net/phillipkregg/eQF3e/

Just in case the values are stored on the server, than you can pull the values down and store them into an array with JQuery ajax calls - like this:

$.getJSON('/my_items', function(data) {
   viewModel.items(data);
});

If you are interested in Knockout - here is another example on their site that shows you how to do much more complex stuff with rows and select boxes: http://knockoutjs.com/examples/cartEditor.html

It may be worth checking the whole site out - the documentation is excellent.

Hope that helps.

how to add a complex table row with javascript?

UPDATE

3 Answers3