Creating dynamic columns with textbox in each column row

[kaka]

I have a requirement as.

I have a table with 2 static columns where each has a textbox.

I also have a add row button outside the table and one remove row button along each row.

When the user clicks add row it adds a row to the table and I can see two columns with textbox in each. User can add more rows if required by clicking add row and click remove row to remove rows.

This all has been setup and works fine as :

https://jsfiddle.net/aman1981/xmd1xobm/14/

My issue is there is also an Get Columns button. When the user clicks this button I fetch a list of columns and then add these columns b/w the already existing columns of the table.

Each of these columns also need to have a textbox.

I am not sure how to add columns dynamically. Would appreciate inputs.

So with final setup I want to loop through each row and save it to db.

[Sean Mill]

one option is to change your Data model to hold an observable array of properties

 var Data = function(items) {

    var self = this;

    self.data = ko.observableArray([]);

    for(var i = 0, i < items.length; i++)

    {

    self.data.push(items[0]);

    }

  };

in your html table body you need two foreach bindings - first for the rows and then for the columns

when you add a column you need to

1. push an extra item onto every row.data array

the only other thing is you need a foreach to lay out the rows in your table > thead