JSFiddle - React, Tailwind, and code Playground

by psteele

HTML

<table border="1">
    <tbody>
        <tr data-bind='foreach: data'>
            <td width="50px" data-bind='style: { backgroundColor: $parent.highest() == $data ? "yellow" : "white" }, text: $data'></td>
        </tr>
    </tbody>
</table>

JavaScript

var vm = function() {
    var me = this;
    
    me.data = ko.observableArray([]);
    me.highest = ko.observable(0);
    
    me.loadData = function() {
        var items = [];
        var high = -1;
        for(i=0 ; i < 10 ; i++) {
            var num = me.random(1,15);
            items.push(num);
            if( num > high)
                high = num;
        }
        me.highest(high);
        me.data(items);
    }
    
    me.random = function(from,to) {
		return Math.floor((Math.random() * to) + from);        
    }
}

var viewModel = new vm();
ko.applyBindings(viewModel);
viewModel.loadData();