Add and delete rows of drop downs - jQuery

IamtheWalrus

I want to create rows of 3 drop downs and one label on each row. I initially want one row of drops downs with an 'Add Row' button that adds a new rown underneath the existing row. If I click add 3 times, I get 4 rows (existing plus 3 more). At the start of each row, I want a numbered label, e.g. Row 1, Row 2, etc.

At the end of each row, I want a href called 'Delete row'. This will remove the row that you have clicked the 'Delete row' href. I want the user to be able to remove any row, e.g. if I have 4 rows, I want the user to be able to remove row 3, or any of the rows. When the user removes a row, I want the lables on the remaining row to reflect this deletion, e.g. If I have 3 rows (Row 1, Row 2, Row 3) and I delete row 2. Row 3's label will be called Row 2 and row 3's Id and name attributes will be renamed to row 2.

Can anyone suggest the best way to do this? I think jQuery is best.

Giblet

Have a look at an MVC framework for javascript. KnockoutJS or AngularJS.

It will handle all of this automatically.

kayos

Giblet wrote: »

Have a look at an MVC framework for javascript. KnockoutJS or AngularJS.

It will handle all of this automatically.

Dont you mean MVVM

Giblet

SHUTUP YOU :P

IamtheWalrus

Giblet wrote: »

Have a look at an MVC framework for javascript. KnockoutJS or AngularJS.

It will handle all of this automatically.

Learning one of those 100% from scratch, how long would it take to get drops downs coded you think?

Giblet

Not too long, you could have it working in under a day. The biggest benefit being that you can easily extend it, or apply it to other widgets rather than handrolling jQuery that won't be used anywhere else or will end up being spagetti.