JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://tablesorter.com/jquery.tablesorter.min.js"></script>
<table class=tablesorter width="764" border=1 cellpadding=0 cellspacing=0 id="objective3">
<thead>
<tr>
<th bgcolor="#396FAE" class="divtopheader1">Strategy</th>
<th bgcolor="#396FAE" class="divtopheader1">Objective</th>
<th bgcolor="#396FAE" class="divtopheader1">Status</th>
<th bgcolor="#396FAE" class="divtopheader1">Target Date</th>
<th bgcolor="#396FAE" class="divtopheader1">Target</th>
<th bgcolor="#396FAE" class="divtopheader1">Actual</th>
<th bgcolor="#396FAE" class="divtopheader1">Cumulative</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left" valign="top" class="tvertheadersm">Conservation</td>
<td width="27%" class="tvertheadersm">statutory authority.</td>
<td width="8%" align="center" valign="middle" class="tbody2">
<input type="hidden" value="111">
<thewordIMGshouldgohere src="images/1" alt="Objective met" width=30 height=40 />
</td>
<td width="11%" align=center class="tbody2">
<input type=hidden value="092010">September<br>2010</td>
<td align=center class="tbody2">14 agencies</td>
<td align=center class="tbody2">14 agencies</td>
<td align=center class="tbody2">0 agencies</td>
</tr>
</tbody>
</table>
JavaScript
$(document).ready(function() {
// add parser through the tablesorter addParser method
$.tablesorter.addParser({
// set a unique id
id: 'custom_parser',
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s, table, cell) {
// format your data for normalization
alert("Debug: value of hidden input: " + $('input', cell).val());
return $('input', cell).val();
},
// set type, either numeric or text
type: 'numeric'
});
$("table").tablesorter({
// pass the headers argument and assing a object
headers: {
// assign the secound column (we start counting zero)
2: {
sorter:'custom_parser'
}
}
});
});