JSFiddle - React, Tailwind, and code Playground

by littlesandra88

HTML

<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.min.js"></script>
<div class="page-body">
    <form action="" method="post">
    <table class="alerts tablesorter" id="accTable" cellspacing="0">
        <thead> 
            <tr class="header">
                <th class="activity-header"> A </th>
                <th class="activity-header"> Signed </th>
                <th class="activity-header">  </th>
            </tr>
        </thead> 
        
        <tbody>      
            
                <tr class="row" id="7249">
                    <td class="activity-data">7249</td>
                    <!-- tablesorter can't sort a column with check boxes out-of-the-box, so it needs something to sort on. That is why the span tag is here -->
                    <!-- a jquery script is watching the state of the checkbox, so when clicked the value in the span is updated -->
                    <td class="checkbox"> <span style="display:none;">0</span> <input name="signed" type="checkbox" > </td>
                    <td class="edit-column"> <input value="Save" type="submit" name="7249"></td>
                </tr>
            
                <tr class="row" id="61484">
                    <td class="activity-data">61484</td>
                    <td class="checkbox"> <span style="display:none;">1</span> <input name="signed" type="checkbox" checked > </td>
                    <td class="edit-column"> <input value="Save" type="submit" name="61484"></td>
                </tr>
            
        </tbody>
    </table>
</form>
    
</div>

JavaScript

$(document).ready(function() {
    $("#accTable").tablesorter();

    // :checkbox stops from executing the event on the save button. Same as input[type=checkbox]
    $('#accTable input:checkbox').click(function() {
        // insert 1 or 0 depending of checkbox state in the tag before the input tag. In this case <span> is before <input>
        // this is done so tablesorter have something to sort on, as it doesn't support checkbox sort out of the box.
        var order = this.checked ? '1' : '0';
        $(this).prev().html(order);

        $(this).parents("table").trigger("update");
    });
});

// sends the form content to server side, and stay on page
$('form').live('submit', function() {

    alert('test');

    // don't redirect
    return false;
});