JSFiddle - React, Tailwind, and code Playground

by Ramaswamy Alagappan

HTML

<div>
    <div>
        <table>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
            <tbody data-bind="foreach: players">
                <tr>
                    <td data-bind="text: name"></td>
                    <td data-bind="text: age"></td>
                    <td data-bind="text: country"></td>
                    <td>
                        <button data-bind="click: $root.editPlayers">Edit</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
         <h3>Edit</h3>
Name:
        <input type="text" data-bind="value: name" />
        <br/>Age:
        <input type="text" data-bind="value: age" />
        <br/>Country:
        <input type="text" data-bind="value: country" />
        <br/>Tropies:
        <select data-bind="options: trophies, optionsText: 'Select Trophy'"></select>
    </div>
</div>

JavaScript

var player = function (name, age, country) {
    this.name = ko.observable(name);
    this.age = ko.observable(age);
    this.country = ko.observable(country);
    this.trophies = ko.observableArray['AO','US'];
};

var playerModel = function () {
    var self = this;
    self.players = [
    new player('Roger', 32, 'swiss'),
    new player('Stan', 28, 'swiss')];
    
    self.trophies = ['AO','US','FO', 'WB'];

    self.editPlayers = function (data) {
        console.log(data.name());
    }

}

ko.applyBindings(new playerModel());