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, checked: $root.selectedItems"/>
    </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">
    </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

var data = function() {
  var root = this;

  root.AMRNewDevices = ko.observableArray([{
    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: ""
  }]);
  root.selectedItems = ko.observableArray([]);
  root.OtherInfoData = ko.computed(function() {
    var data = [];
    for (var i = 0; i < root.selectedItems().length; i++) {
      var varOtherInfo;
      for (var j = 0; j < root.AMRNewDevices().length; j++) {
        if (root.AMRNewDevices()[j].ID === root.selectedItems()[i]) {
          varOtherInfo = root.AMRNewDevices()[j].OtherInfo;
        }
      }
      var item = {
        ID: root.selectedItems()[i],
        OtherInfo: varOtherInfo
      };
      data.push(item);
    }
    return data;
  });
};

ko.applyBindings(new data());