JSFiddle - React, Tailwind, and code Playground

by smacky311

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<table id="searchTable">
        <thead>
            <tr>
                <th>Manufacturer Number</th>
                <th>Lawson Number</th>
                <th>Cpm Item Number</th>
                <th>Short Description</th>
                <th>Long Description</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: items">
            <tr class="dataRowItem" data-bind="css: { 'selected': $root.selectedItem() == $data }, click: $parent.rowSelected">
                <td data-bind="    text: ManufacturerCatalogNum2"></td>
                <td data-bind="    text: LawsonNumber"></td>
                <td data-bind="    text: CpmItemNumber"></td>
                <td data-bind="    text: ShortDescription"></td>
                <td data-bind="    text: LongDescription"></td>
            </tr>
        </tbody>
    </table>

CSS

.selected
{
    background-color:#060669;
}

JavaScript

var jsonVarSimple = '{"Collection":[{"BaylorSite":null,"CPMCaseNumber":null,"CdmNumber":"08001501 ","Chargeable":"Y","Comments":null,"CostAtEachSite":"0","CostOfEach":null,"CostOfUnit":"0","CpmCaseNumber":null,"CpmItemNumber":null,"CpmProductCategory":null,"DescriptionDescription":null,"DescriptionManufacturer":null,"DescriptionPrimaryClassification":null,"DescriptionResult":null,"DescriptionSize":null,"HcpcsAssignment":null,"LawsonNumber":null,"LongDescription":null,"Manufacturer":null,"ManufacturerCatalogNum2":null,"QuantityAtEachSite":"0","QuantityPerUnit":"0","RequestID":null,"RequestedBy":"e78590","ResourceType":null,"RollUp":null,"SearchBy":null,"ShortDescription":null,"Status":null,"UB92Assignment":null,"UnitOfPurchase":null,"Vendor":null}]}';

 function AppViewModel() {
     var self = this;
     self.items = ko.observableArray();
     self.rowSelected = function (row) {
         console.log('row click');
     }     
    loadData(self);     
 }

function loadData(self) {
    $.each(jsonVarSimple.Collection, function (i, val) {
        console.log(val);
        self.items.push(val);
    });
}

ko.applyBindings(new AppViewModel());

console.log(json);