JSFiddle - React, Tailwind, and code Playground

by Steven Lacks

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<p>X-editable: create editable column in table.<br>
 As pk is unique in each row, you should put it in data-pk attribute.  
</p>
<div style="margin: 150px">
    <table id="users" class="table table-bordered table-condensed">
        <tr><th>#</th><th>name</th><th>age</th></tr>
        <tr>
            <td>1</td>
            <td><a href="#" data-pk="1">01/01/2012</a></td>
            <td>21</td>       
        </tr>
        
        <tr>
            <td>2</td>
            <td><a href="#" data-pk="2">03/01/2014</a></td>
            <td>28</td>       
        </tr>        
        
        <tr>
            <td>3</td>
            <td><a href="#" data-pk="3">03/01/2015</a></td>
            <td>24</td>       
        </tr>        
        
    </table>    
</div>

JavaScript

$('TABLE TD A').editable({
     type: 'date',
     name: 'test',
     pk: $(this).attr("pk"),
     format: 'dd/mm/yyyy',
     url: '/post',
     title: 'Cambiar' 
});

//ajax emulation
$.mockjax({
    url: '/post',
    responseTime: 200
});