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>      
            
                    <!-- <input name="anchor" value="7249" type="hidden"> -->
        <tr class="row" id="7249">
          <td class="activity-data">7249</td>
          <td class="activity-data">Bjarne</td>

          <td class="activity-data">Poulsen</td>
          <td class="activity-data">bjpo</td>
          <td class="activity-data">bjp</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;">1</span> <input name="signed" type="checkbox" checked > </td>

          <!-- <td class="edit-column"><a href="javascript:showhide('7249');">Details</a> <input value="Save" type="submit"></td> -->
          <td class="edit-column"><a href="javascript:addRemove('7249');">Details</a> <input value="Save" type="submit" name="7249"></td>
        </tr>
          
        <!-- <input name="anchor" value="61484" type="hidden"> -->
        <tr class="row" id="61484">
          <td class="activity-data">61484</td>
          <td class="activity-data">Radu Vlad</td>

          <td class="activity-data">Acretoaie</td>
          <td class="activity-data">-1</td>
          <td class="activity-data">s100988</td>
          <!--...

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


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