JSFiddle - React, Tailwind, and code Playground

by David Thomas

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;
});

$('form').delegate('input:submit','click',
                   function(){
                       var idString = this.name;
                       var checkboxState = $('#' + idString).find('input:checkbox').is(':checked');
                       
                       if (checkboxState == true){
                           alert('1');
                       }
                       else {
                           alert('0');
                       }
                       return false;
                   });