JSFiddle - React, Tailwind, and code Playground
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>
<h1> Please use the form below to edit the appropriate data for the product.
The BLUE fields are NOT EDITABLE, deal with it. </h1> <br><br>
<hr width="50%" size="3" align="left" /><br>
<b> Product info: </b><br>
<form name=update_product_input action=update_product.php method=post onSubmit="return checkupdateinputs()" >
<table border=0 cellpadding="2" cellspacing="2">
<tr>
<td bgcolor=#99CCFF ><b>id</b></td>
<td bgcolor=#99CCFF ><b>product_id</b></td>
<td><b>description</b></td>
<td><b>category</b></td>
</tr>
<tr>
<td bgcolor=#99CCFF> 309 </td>
<td bgcolor=#99CCFF> 255 </td>
<td> <input type=text name=description value="zucchini" size=30 maxlength=64 > </td>
<td> <select name=category_id>
<option selected value="1">produce</option>
<option value="15">alcohol</option>
<option value="5">bakery</option>
<option value="6">baking</option>
<option value="20">bau3r</option>
<option value="13">beverages</option>
<option value="8">breakfast</option>
<option value="10">canned foods</option>
<option value="16">cleaning products</option>
<option value="11">condiments</option>
<option value="3">dairy</option>
<option value="2">deli</option>
<option value="14">dry foods</option>
<option value="4">frozen foods</option>
<option value="19">healthcare</option>
<option value="18">kitchen supplies</option>
<option value="12">meats</option>
<option value="1">produce</option>
<option value="7">snacks</option>
<option value="9">spices</option>
<option...
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;
});