html - Dynamic tables with JavaScript KnockoutJS -

hello i'm trying create dynamic table input values using knockout. table later work data matrix, can multiplicate input value of "product brands".

this have now:

	          var group = function(brand,value) {              this.brand = ko.observable(brand);          };          var viewmodel = function(groups) {              var self = this;                 	self.optionvalues_brand = ko.observablearray(["brand1","brand2","brand3"]);              self.selectedbrand = ko.observable();                        self.groups = ko.observablearray(ko.utils.arraymap(groups, function(group) {                  return new group(group.brand);              }));                          self.addgroup = function() {            		self.groups.push(new group(self.selectedbrand()));            }        }                var initialgroups = [];                   var viewmodel = new viewmodel(initialgroups);          ko.applybindings(viewmodel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table>    <tr>      <td>brand:</td>        <td><select data-bind="options: optionvalues_brand, optionscaption: 'select one...', value:       selectedbrand"></select></td>          <td><button data-bind="click: addgroup">add</button></td>     </tr>  </table>      <div>    <table border="1">      <thead>        <tr data-bind="foreach: groups">          <th></th>          <th data-bind="text: brand"></th>        </tr>      </thead>      <tbody data-bind="foreach: groups">      <tr>        <td data-bind="text: brand"></td>        <td><input type="number" /></td>      </tr>      </tbody>    </table>  </div>

the problem need columns , rows have input field, 1 column beeing filled input field.

fiddle: http://jsfiddle.net/ypw79dnv/

how insert input fields in columns , rows?

thanks.

your inputs aren't bound variables, , haven't made them bound to, although make table fill way want, don't think useful you.

you need make matrix of observables. each time add group, add new row matrix, , add new input on end of each row. it's bit tricky keep straight, able cross-reference values.

var group = function(brand, value) {    this.brand = ko.observable(brand);  };    var viewmodel = function(groups) {    var self = this;      self.optionvalues_brand = ko.observablearray(["brand1", "brand2", "brand3"]);    self.selectedbrand = ko.observable();      self.groups = ko.observablearray(ko.utils.arraymap(groups, function(group) {      return new group(group.brand);    }));    self.matrix = ko.observablearray([]);    self.addgroup = function() {      // add new row matrix      var newrow = ko.observablearray();      ko.utils.arrayforeach(self.groups(), function(group) {        newrow.push(ko.observable());      });      self.matrix.push(newrow);      self.groups.push(new group(self.selectedbrand()));      // add group each row in matrix      ko.utils.arrayforeach(self.matrix(), function(row) {        row.push(ko.observable());      });    };    self.matrix.subscribe(function(newvalue) {      console.debug("matrix:", newvalue.length, newvalue[0]().length);    });  }    var initialgroups = [];    var viewmodel = new viewmodel(initialgroups);  ko.applybindings(viewmodel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table>    <tr>      <td>brand:</td>      <td>        <select data-bind="options: optionvalues_brand, optionscaption: 'select one...', value:       selectedbrand"></select>      </td>        <td>        <button data-bind="click: addgroup">add</button>      </td>    </tr>  </table>      <div>    <table border="1">      <thead>        <tr>          <th></th>          <!-- ko foreach: groups -->          <th data-bind="text: brand"></th>          <!-- /ko -->        </tr>      </thead>      <tbody data-bind="foreach: groups">        <tr>          <td data-bind="text: brand"></td>          <!-- ko foreach: $parent.matrix()[$index()]() -->          <td>            <input type="number" data-bind="value:$data" />          </td>          <!-- /ko -->        </tr>      </tbody>    </table>  </div>