Bootstrap table editable JSON- LocalStorage

Bootstrap table editable JSON- LocalStorage - Andrew Pougher

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.io/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="http://vitalets.github.io/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<script src="http://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<div class="row span12 well">
    <table class='class="table table-striped table-bordered  offset1' id="table">
          <thead>  <tr>
            <th>id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Password</th>
            <th>Blocked</th>
              </tr>   </thead> 
    </table>
</div>
<button class='btn btn-large btn-success'>Update</button>
<hr>
    <code><p></p></code>

CSS

th, tr, td {text-align:center;padding:8px}
i:hover {opacity:0.6}
i {cursor:pointer}

JavaScript

$(document).ready(function () {
        
        if (localStorage.getItem("tbljson") == null){
        var json = [{
            "id": "24",
            "Full_Name": "John Doe",
            "Email_Address": "[email protected]",
            "userPass":"123-415-ff",
            "isBlocked": "no"
        }, {
                        "id": "25",
            "Full_Name": "Jane Smith",
            "Email_Address": "[email protected]",
            "userPass":"mycatsfat",
            "isBlocked": "no"
        }, {
                        "id": "14",
            "Full_Name": "Chuck Berry",
            "Email_Address": "[email protected]",
            "userPass":"wifesabyatch",
            "isBlocked": "yes"
        }];
        
localStorage.setItem("tbljson", JSON.stringify(json));
var myjson = JSON.parse(localStorage.getItem("tbljson"));
        } else{
        var myjson = JSON.parse(localStorage.getItem("tbljson"));
        }

        // build the table from JSON
        var tr;
        for (var i = 0; i < myjson.length; i++) {
            tr = $('<tr/>');
             tr.append("<td>" + myjson[i].id + "</td>");
            tr.append("<td><span>" + myjson[i].Full_Name + "</span></td>");// editable
            tr.append("<td>" + myjson[i].Email_Address + "</td>");
            tr.append("<td><span>" + myjson[i].userPass + "</span></td>");// editable
            tr.append("<td>" + checkBlock(myjson[i].isBlocked) + "</td>");
            $('table').append(tr);
        }
        
        
        
        /* --- sort Table click --*/
        
        $("table").tablesorter( {sortList: [ [1,0]]} ); //This tells tablesorter to sort on the NAME column in ascending order.

 
    }); // end doc ready


//when building the table replace the boolean with icons
 function checkBlock(n) {
        var nom
        if (n.match("yes$")) {
            nom = n.replace('yes', "<i class='icon-white icon-remove isBlocked'></i>"); 
        } else {
            nom = n.replace('no', "<i class='icon...