JSFiddle - React, Tailwind, and code Playground

by StevenLangeraert

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


<body>

<div class="container">
    <h1> Table of users</h1>
    <hr>
    <table class="table" id="tableCont">
        <thead>
        <tr>
            <th>Username</th>
            <th>Level</th>
            <th>Registration Status</th>
            <th>Registration Date</th>
            <th>Edit User</th>

        </tr>
        </thead>
        <tbody id="users">


        </tbody>
    </table>
    <form class="form-horizontal" role="form" id="userForm">

        <h2 id="new">New User</h2>

        <h2 id="edit">Edit User</h2>

        <hr/>
        <div class="form-group">
            <div class="col-sm-12">
                <input type="hidden" class="form-control" id="userId">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <input type="text" class="form-control" id="username" placeholder="User Name">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <input type="number" class="form-control" id="level" placeholder="Level">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <input type="text" class="form-control" id="regstatus" placeholder="Registration Status">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <input type="date" class="form-control" id="regdate" placeholder="Registration Date">
            </div>
        </div>

        <br/>
    </form>
    <button class="btn btn-danger" value="updateUser" id="updateUser" onclick="updateUser()">Update</button>
    <button class="btn btn-primary pull-right" id="saveUser">Save</button>
    <br/>
    <button class="btn btn-success" id="newUser">New User</button>
</div>

</body>
</html>

CSS

.container {
    max-width: 960px;
}

h1 {
    text-align: center;
}

.table {
    text-align: left;
}

#userForm {
    display: none;
}

#saveUser {
    display: none;
}
#updateUser{
    display: none;
}

JavaScript

var userData;

editUser = function (id) {
        $(".table").hide();
        $("#userForm").show();
        $("#newUser").hide();
        $("#new").hide();
        $("#edit").show();
        $("#updateUser").show();
       
        var userData = findObjectById(id);


    
        $("#userId").val(userData.id);
        $("#username").val(userData.username);
        $("#level").val(userData.level);
        $("#regstatus").val(userData.regstatus);
        $("#regdate").val(userData.regdate);

    
    };

updateTable = function () {
    $("#users").html('');
        for (var i = 0, l = userData.length; i < l; i++) {
            updateRow(userData[i]);
        }
    };

updateRow = function (data) {
        var html = '<tr id = ' + data.id + '>' +
            '<td>' + data.username + '</td>' +
            '<td>' + data.level + '</td>' +
            '<td>' + data.regstatus + '</td>' +
            '<td>' + data.regdate + '</td>' +
            '<td>' +
            '<button class="btn btn-info"value="Edit" onclick="editUser(' + data.id + ')">Edit</button>' + ' ' +
            '<button class="btn btn-danger" value="Delete" onclick="userList.deleteRow(' + data.id + ')">Delete</button>' + '</td>' +
            '</tr>';


        $("#users").append(html);

    };

findObjectById = function (id) {
        for (var i = 0, l = userData.length; i < l; i++) {
            if (userData[i].id == id) {
                return userData[i];
            }
        }

    };

updateObjectById = function (id, obj){
            for (var i = 0, l = userData.length; i < l; i++) {
            if (userData[i].id == id) {
                userData[i] = obj;
            }
        }
};

updateUser = function () {
        var id = $("#userId").val();
        var user = findObjectById(id);

        user.username = $('#username').val();
        user.level = $('#level').val();
        user.regstatus = $('#regstatus').val();
        user.regdate = $('#regdate').val();

        updateObjectById(id,...