jQuery add/remove row

Question

I am trying to setup jQuery rows, with add/remove row functionality. I got started with online tutorial,

http://jsbin.com/aciba

that works fine. It only has input forms though. We need select to choose from.

Now, I made some changes to accept selects as as well as inputs:

http://jsbin.com/emata

This does not work. Try selecting option 3 in cell 1, and press add "Add". The row added gets default "Cell 1" selected option to 1.

What could be the reason?

Answer 1

The problem is that the use of clone on var newRow = addRow.clone(); clones the select with all the options but does set the selected option. You will need to do that yourself.

Adding

$('select', newRow).val($('select', addRow).val());

somewhere before

$('select', addRow).val(''); 

should solve your problem.

Also I would consider renaming your select box to:

<select name="n0_0" id="n0_0" style="width: 160px;">

To follow the naming scheme of the other inputs.

Answer 2

I wrote a jQuery plugin that lets you do this. You can add and remove rows (with animation) and it doesn't require wrapping your data with a div or anything like that. Check it out at http://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

Best,

Fletch