JSFiddle - React, Tailwind, and code Playground

by Carolyn Marshall

HTML

<table>
  <tr>
    <th>
      <input type="checkbox"/>
      Select All
    </th>
    <th colspan="8"></th>
  </tr>
    <tr>
      <td>Select</td>
      <td>ID</td>
      <td>MPR</td>
      <td>Read Date</td>
      <td>Reading Source</td>
      <td>Reading Reason</td>
      <td>Reading</td>
      <td>Round Clock Count</td>
      <td>Status</td>
      <td>Other Info</td>
    </tr>
  <tbody data-bind="foreach: AMRNewDevices">
    <tr>
    <td>
      <input type="checkbox" data-bind="value: ID/>
    </td>
    <td>
      <span data-bind="text: ID"></span>
    </td>
    <td>
      <span data-bind="text: MPR"></span>
    </td>
    <td>
      <span data-bind="text: ReadDate"></span>
    </td>
    <td>
      <span data-bind="text: ReadingSource"></span>
    </td>
    <td>
      <span data-bind="text: ReadingReason"></span>
    </td>
    <td>
      <span data-bind="text: Reading"></span>
    </td>
    <td>
      <span data-bind="text: RoundClockCount"></span>
    </td>
    <td>
      <span data-bind="text: Status"></span>
    </td>
    <td>
      <input type="text" data-bind="value: OtherInfo, valueUpdate: 'afterkeydown'">
    </td>
  </tr>
  </tbody>
</table>

<h4>ID-Other Info</h4>
<div data-bind="foreach: OtherInfoData">
  <div>
    ID: <span data-bind="text: ID"></span>
    OtherInfo: <span data-bind="text: OtherInfo"></span>
  <div>
</div>

JavaScript

$(function() {

var data = [{
    ID: 6104,
    MPR: 75384405,
    ReadDate: "16/03/2012 06:00:00",
    ReadingSource: "N",
    ReadingReason: "R",
    Reading: 102267,
    RoundClockCount: 0,
    Status: "New",
    OtherInfo: ""
  }, {
    ID: 1357,
    MPR: 8815365509,
    ReadDate: "14/06/2013 17:01:00",
    ReadingSource: "N",
    ReadingReason: "R",
    Reading: 469075,
    RoundClockCount: 0,
    Status: "New",
    OtherInfo: ""
  }];



var viewModel = {
  var root = this;

  //root.AMRNewDevices: ko.observableArray(data),
 	root.AMRNewDevices: ko.observableArray(data);
  
  
}
});
ko.applyBindings(viewModel)