JSFiddle - React, Tailwind, and code Playground

by danmana

HTML

<script src="http://www.datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://www.datatables.net/release-datatables/media/css/demo_table.css">
<table id="tableEditor">
    <thead><tr><td>Property</td><td>Value</td></tr></thead>
    <tbody>
        <tr><td>ID</td><td><input class="save-me" name="id"></td></tr>
        <tr><td>Value</td><td><input class="save-me" name="value"></td></tr>
        <tr><td>Description</td><td><textarea class="save-me" rows="10" name="description"></textarea></td></tr></tbody>
</table>

<button id="save">Save</button>

JavaScript

//data would be retrieved from a ajax call
var data = {
    id: 123456,
    value: 'this is a value',
    description: 'my description'
};

$('#tableEditor').dataTable({
    bSort: false,
    bInfo: false,
    bLengthChange: false,
    bFilter: false,
    bPaginate: false
});


$('#save').click(function() {
    var data = {};
    $('#tableEditor .save-me').each(function() {
        data[this.name] = $(this).val();
    });
    //todo: ajax call for saving
    alert(JSON.stringify(data));
});

//todo $.getJSON(url,{id:xxx},jsonCallback);


function jsonCallback(data) {
    debugger;
    var key;
    for (key in data) {
        if (data.hasOwnProperty(key)) {
            $('#tableEditor [name=' + key + ']').val(data[key]);
        }
    }
}


jsonCallback(data);