JSFiddle - React, Tailwind, and code Playground

by sfpgmr

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="http://sfpgmr.github.io/0002/scripts/undoredo.js"></script>
<button data-bind="click:addRecord" >追加</button>
<table class="table table-striped table-condensed">
    <thead>
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th>趣味</th>
        </tr>
    </thead>
    <tbody data-bind="foreach:data">
        <tr>
            <td><input type="text" data-bind="value:name"/></td>
            <td><input type="text" data-bind="value:age"/></td>
            <td><input type="text" data-bind="value:hobby"/></td>
            <td><button data-bind="click:$parent.deleteRecord">削除</button></td>
        </tr>
    </tbody>
</table>

JavaScript

function ViewModel()
{
    var self = this;
    self.data = ko.observableArray(
        [
            {
                name:ko.observable('田中'),
                age:ko.observable(18),
                hobby:ko.observable('ゴルフ')
            },
            {
                name:ko.observable('鈴木'),
                age:ko.observable(18),
                hobby:ko.observable('野球')
            }
        ]); 
   self.addRecord = function()
   {
       self.data.push({
           name:ko.observable('新規'),
           age:ko.observable(),
           hobby:ko.observable()
       });
   }
   
   self.deleteRecord = function(target){
       self.data.remove(target);
   }
}

$().ready(function(){
    ko.applyBindings(new ViewModel());
});