TBS3 Updating Table Values

by jme11

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<table class="table">
    <thead>
        <tr>
            <th>User Name</th>
            <th>Is Active</th>
            <th>Status</th>
            <th>Edit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mark</td>
            <td>yes</td>
            <td class="status">Active</td>
            <td><a href='#' class='btn btn-sm btn-primary unlockBtn'>Lock</a>

            </td>
        </tr>
        <tr>
            <td>Jacob</td>
            <td>yes</td>
            <td class="status">Inactive</td>
            <td><a href='#' class='btn btn-sm btn-primary unlockBtn'>Unlock</a>

            </td>
        </tr>
        <tr>
            <td>Larry</td>
            <td>no</td>
            <td class="status">Active</td>
            <td><a href='#' class='btn btn-sm btn-primary unlockBtn'>Lock</a>

            </td>
        </tr>
    </tbody>
</table>

CSS

tr td:nth-child(4) {
    width: 90px; 
}

JavaScript

$(document).on('click', '.unlockBtn', (function (e) {
    //get the user id
    var $this = $(this);
    var userStatus = $(this).closest('tr').find('td:eq(2)').text();
    if (userStatus == 'Active') {
        data = 'Inactive'; //this is to replicate the returned data from your $post
        $this.closest('tr').find('.status').text(data);
        $this.text("Unlock");
    } else {
        data = 'Active'; //this is to replicate the returned data from your $post
        $this.closest('tr').find('.status').text(data);
        $this.text("Lock");
    }
}));