Knockout table

by ozzymcduff

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<p>Table</p>
<div class="layer1">
  <table>
    <tbody data-bind="foreach: grid.rows">
      <tr data-bind="foreach: cells">
        <td>
          <input type="text" data-bind="value:$data" />
        </td>
      </tr>
    </tbody>
  </table>
</div>

<div class="layer2">
  <table>
    <tbody data-bind="foreach: grid2.rows">
      <tr data-bind="foreach: cells">
        <td>
          <input type="text" data-bind="value:$data" />
        </td>
      </tr>
    </tbody>
  </table>
</div>
<br>

CSS

.layer1 { 
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
/*  width: 80%;
  left: 60px;
  top: 3em;*/
  opacity: 0.4;
}
.layer2 { 
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
 /* width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;*/
  opacity: 0.9;
}

JavaScript

function Row() {
  this.cells = [];
  this.init = function (cells) {
    this.cells = cells;
    return this;
  };
}

function Grid() {
  this.rows = [];
  this.init = function (data) {
    this.rows=data.map(function (row) {
      return new Row().init(row);
    });
    return this;
  };
}

function Layer(){
  
}

var grid = new Grid();
grid.init([
  ['a', 'c'],
  ['b', 'd']
]);
var grid2 = new Grid();
grid2.init([
  ['a1', 'c1'],
  ['b1', 'd1']
]);

ko.applyBindings({
  grid: grid,
  grid2: grid2
});