I have a form that prints a out menu items from each category. I want to have a select all checkbox over each category such that when clicked, all checkboxes of that category are selected.
Issue: Sometimes some check boxes are not checked by default e.g. no data in database - in that case the select all checkbox should not be checked when page is rendered (it should only checked if all its child check boxes are checked).
Current partial implementation (checked is true for select all even if some of its some menu items are not checked?!):
checked = true;
$(".all").click(function() {
checked = !checked;
var selectid = this.id.replace(/ /g, '');
console.log("====>>>" + selectid);
var item = `${selectid}-item`;
console.log("===<<<" + item)
var checkElements = $(`.${selectid}-item`).prop('checked', checked);
$(selectid + "-item").prop('checked', !checked);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Cats</th>
<th colspan='2'>Available</th>
<th colspan='2'><input id="Cats" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Cat 1</td>
<td colspan='2'><input name="Cats,cat1" class="Cats-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 2</td>
<td colspan='2'><input name="Cats,cat2" class="Cats-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 3</td>
<td colspan='2'><input name="Cats,cat3" class="Cats-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Dogs</th>
<th colspan='2'>Available</th>
<th colspan='2'><input id="Dog Big" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Dog 1</td>
<td colspan='2'><input name="Dogs,dogs1" class="Dog Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 2</td>
<td colspan='2'><input name="Dogs,dogs2" class="Dog Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 3</td>
<td colspan='2'><input name="Dogs,dogs3" class="Dog Big-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<input type="submit" value="Save Setting" style="margin-top:20px; margin-left:0;">
</form>
I had to normalise your classes. They were not consistent. Don't have spaces in IDs (I got rid of the ID from all)
and do not have spaces between classNames that mean something when taken together
const checkAll = () => {
$(".all").each(function() {
const subClass = $(this).data("class");
const $sub = $("." + subClass+"-item");
$(this).prop("checked", $sub.length === $sub.filter(":checked").length)
})
};
$(function() {
checkAll(); //on load
$(".all").on("click", function() {
const $sub = $("." + $(this).data("class")+"-item");
const checked = this.checked;
$sub.prop('checked', checked);
})
$(".item").on("click", checkAll)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Cats</th>
<th colspan='2'>Available</th>
<th colspan='2'><input data-class="Cat" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Cat 1</td>
<td colspan='2'><input name="Cats,cat1" class="item Cat-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 2</td>
<td colspan='2'><input name="Cats,cat2" class="item Cat-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 3</td>
<td colspan='2'><input name="Cats,cat3" class="item Cat-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Dogs</th>
<th colspan='2'>Available</th>
<th colspan='2'><input data-class="Dog_Big" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Dog 1</td>
<td colspan='2'><input name="Dogs,dogs1" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 2</td>
<td colspan='2'><input name="Dogs,dogs2" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 3</td>
<td colspan='2'><input name="Dogs,dogs3" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<input type="submit" value="Save Setting" style="margin-top:20px; margin-left:0;">
</form>
Related
first group : Agen LPG 3KG
second group : Office HRG
I want to select a checkbox based on the group, but at this time when I click on group one then group two should be selected when I click on group one then group one is checked, why is it selected only in the last loop?
my code in index.blade.php
#foreach ($business_unit as $group => $unit)
<tr>
<td colspan='5' style='font-weight: bold'>{{ $group }} #if ($group == '') Unit Bisnis Lainnya #endif</td>
</tr>
<tr class="unit_bisnis">
<th style="width: 130px"> <input type="checkbox" data-business-id="{{$group}}" onclick="toggle(this);"> Select All</th>
<th>Nama</th>
<th>Jabatan</th>
</tr>
#foreach ($unit as $item)
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check" id="{{$group}}" name="employee_id[]" value="{{ $item->employee_id }}">
<td class='captial'>{{ $item->name }}</td>
<td class='captial'>{{ $item->position ?? '-' }}</td>
</tr>
#endforeach
#endforeach
Here is the javascript for this
<script>
function toggle(source) {
var business_id = $(this).data('business-id');
var checkboxes = document.querySelectorAll('input[id="{{$group}}"]');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i] != source)
checkboxes[i].checked = source.checked;
}
}
</script>
how to solve my problem please help me.
You only have ONE input[id="{{$group}}" so it will only ever do that one.
Instead delegate (and remove onclick="toggle(this);") and use the data attributes you already have:
I assume the table has id="tableID" and you need to change the checkbox to class="emp-check {{$group}}"
document.getElementById("tableID").addEventListener("click", function(e) {
const tgt = e.target;
if (!tgt.matches("[data-business-id]")) return // or use a class
const business_id = tgt.dataset.businessId; // the business-id becomes businessId
const checked = tgt.checked;
document.querySelectorAll(`input.${business_id}`).forEach(chk => chk.checked = checked)
})
<table id="tableID">
<tr>
<td colspan='5' style='font-weight: bold'>group 1</td>
</tr>
<tr class="unit_bisnis">
<th style="width: 130px"> <input type="checkbox" data-business-id="group1"> Select All</th>
<th>Nama</th>
<th>Jabatan</th>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group1" name="employee_id[]" value="emp 1">
<td class='captial'>G1 Name 1</td>
<td class='captial'>Whatever</td>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group1" name="employee_id[]" value="emp 2">
<td class='captial'>G1 Name 2</td>
<td class='captial'>Whatever</td>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group1" name="employee_id[]" value="emp 3">
<td class='captial'>G1 Name 3</td>
<td class='captial'>Whatever</td>
</tr>
<tr>
<td colspan='5' style='font-weight: bold'>group 2</td>
</tr>
<tr class="unit_bisnis">
<th style="width: 130px"> <input type="checkbox" data-business-id="group2"> Select All</th>
<th>Nama</th>
<th>Jabatan</th>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group2" name="employee_id[]" value="emp 1">
<td class='captial'>G2 Name 1</td>
<td class='captial'>Whatever</td>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group2" name="employee_id[]" value="emp 2">
<td class='captial'>G2 Name 2</td>
<td class='captial'>Whatever</td>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group2" name="employee_id[]" value="emp 3">
<td class='captial'>G2 Name 3</td>
<td class='captial'>Whatever</td>
</tr>
</table>
I'm not sure why this jquery is not working. What I want is pretty straightforward: selecting all check boxes under the region. Could someone help tell why it's not working?
$(function(){
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).next('tbody').find('.region_ct');
if(checkthis.is(':checked')) {
checkboxes.attr('checked', true);
} else {
checkboxes.attr('checked', false); }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
...
</table>
There are a couple of issues there:
I would strongly recommend against intermixing tr and tbody elements. If you're going to use tbody (and you should), use it consistently. Browsers may relocate tr elements into generated tbody elements.
The element you're calling next on doesn't have a following sibling (at all, much less the one you're looking for). You have to traverse up the hierarchy to the tr (if you don't fix #1) or the tbody (if you do).
You don't use attr to set checked, you use prop; and you can use your existing checked boolean rather than if/else, giving is simply checkboxes.prop("checked", this.checked);
Example with updated tbodys, and I've added some countries in the Asia area to demonstrate that only the relevant checkboxes are checked:
$(function() {
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).closest('tbody').next().find('.region_ct');
checkboxes.prop("checked", this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2>
<input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
<tr>
<td colspan=2>
<input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />China</td>
<td class="center"></td>
</tr>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Vietnam</td>
<td class="center"></td>
</tr>
</tbody>
</table>
You might also consider putting the select_all inside the same tbody with the checkboxes, so you could do away with next.
tbody isn't sibing of .select_all. You need to use .closest() to select parent of .select_all and use .find() to select .region_ct in it. Also you don't need to use if/else to check/uncheck checkbox. Only set this.checked to checked attribute of checkbox using .prop().
$('.select_all').change(function() {
$(this).closest('table').find('.region_ct').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
</table>
I have a table that renders data from my Django app which uses PostgreSQL database. How would I add a button to switch the Score column so it'll display the numbers between its original decimal value and rounded whole numbers?
Here is an example of what it would look like: https://jsfiddle.net/8a66gtww/
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th class="track_id"><input id="checkAll" type="checkbox" /></th>
<th>First Name</th>
<th>Last Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="track_id"><input type="checkbox" name="track_id" value="2" /></td>
<td>John</td>
<td>Do</td>
<td>65.85</td>
</tr>
<tr class="even">
<td class="track_id"><input type="checkbox" name="track_id" value="1" /></td>
<td>Michael</td>
<td>Smith</td>
<td>88.25</td>
</tr>
<tr class="odd">
<td class="track_id"><input type="checkbox" name="track_id" value="4" /></td>
<td>Donald</td>
<td>James</td>
<td>120.11</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<br />
<button onclick="myFunction()">Switch</button> // Switches score between decimal and rounded whole number
See if it helps. I just modified your html a little for storing your score values so it can undo the round.
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th class="track_id"><input id="checkAll" type="checkbox" /></th>
<th>First Name</th>
<th>Last Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="track_id"><input type="checkbox" name="track_id" value="2" /></td>
<td>John</td>
<td>Do</td>
<td>65.85</td>
<input type="hidden" value="65.85">
</tr>
<tr class="even">
<td class="track_id"><input type="checkbox" name="track_id" value="1" /></td>
<td>Michael</td>
<td>Smith</td>
<td>88.25</td>
<input type="hidden" value="88.25">
</tr>
<tr class="odd">
<td class="track_id"><input type="checkbox" name="track_id" value="4" /></td>
<td>Donald</td>
<td>James</td>
<td>120.11</td>
<input type="hidden" value="120.11">
</tr>
</tbody>
<tfoot></tfoot>
</table>
<br />
<button class="switch">Switch</button>
and jquery is:
$('.switch').click(function () {
$('.table tbody tr td:nth-child(4)').each(function() {
if ($(this).html().indexOf('.') >= 0) {
$(this).html(Math.round($(this).html()));
} else {
$(this).html($(this).parent().find('input[type=hidden]').val());
}
});
});
It verifies if your score has the decimal dot. If the score is decimal, then it rounds it. If the score isn't decimal, it restores the original value.
https://jsfiddle.net/jdm3eovz/
Here's something to get you started:
<script>
window.switcher = {
johnsScore: 0
}
switcher.switch = function(){
var $johnsScore = $('tbody > tr td').eq(3)
var $johnsCheckbox = $('tbody > tr input')
if ($johnsCheckbox.prop('checked')) {
if (this.johnsScore > 0) {
$johnsScore.text(this.johnsScore)
this.johnsScore = 0
}
else {
this.johnsScore = $johnsScore.text()
$johnsScore.text(Math.round(this.johnsScore))
}
}
}
</script>
The button then changes to:
<button onclick="switcher.switch()">Switch</button>
I'm trying to have "set all" radio buttons at the bottom of my popup control so when the user has a long list of conflicts to resolve, they can just select one of the radio buttons and the option will be quickly select. However, my javascript fires, and seems to find the radio button, but fails to actually set the radio button.
I have a gridview gvErrors that is being looped though and in the second cell of each gridview row is a table with the options (tblOptions). I have tried using .attr("checked", true), .setAttribute("checked", true), and .prop("checked", true). I am receiving no errors, in the console, but the radio buttons all remain unchecked. Any help with this would be appreciated. Below is the Javascript.
<script type="text/javascript" language="javascript">
function selectAll(option) {
var grid = document.getElementById("<%=gvErrors.ClientID%>");
for (var i = 0; i < grid.rows.length; i++)
{
var row = grid.rows[i];
var table = $(row).find("tblOptions");
var radio = $(table).find("input[name*=" + option + "]:radio");
//$('td input:radiobutton', '#tblOptions').prop('checked', true);
$(radio).prop("checked", "checked");
var test = "";
}
};
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbCancelAll.ClientID%>").click(function() {
selectAll("rdbCancel");
});
});
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbReplaceAll.ClientID%>").click(function() {
selectAll("rdbReplace");
});
});
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//This handles the rows or colums selection
$("#<%=rdbRenameAll.ClientID%>").click(function() {
selectAll("rdbRename");
});
});
</script>
Small example of the gridview:
<table class="tableinfo nocollapse c6" cellspacing="1" cellpadding="2" border="0" id="ctl00_Main_gvErrors">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th scope="col"><span class="c1">Current Name</span></th>
<th scope="col"><span class="c1">Options</span></th>
<th scope="col">Differences</th>
</tr>
<tr class="tableinfobody">
<td class="l"><span id="ctl00_Main_gvErrors_ctl02_lblName">Test1</span></td>
<td class="l">
<table id="ctl00_Main_gvErrors_ctl02_tblOptions" border="0">
<tbody>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbCancel" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbCancel" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbCancel">Cancel adding signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbReplace" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbReplace" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbReplace">Replace curent signal with
imported signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl02_rdbRename" type="radio" name=
"ctl00$Main$gvErrors$ctl02$Options" value="rdbRename" /><label for=
"ctl00_Main_gvErrors_ctl02_rdbRename">Rename imported signal to:</label>
<input name="ctl00$Main$gvErrors$ctl02$txtNewName" type="text" value=
"Test1_1" id="ctl00_Main_gvErrors_ctl02_txtNewName" class="c2" /></td>
</tr>
</tbody>
</table>
</td>
<td class="l">
<input type="hidden" name="ctl00$Main$gvErrors$ctl02$hfParamInternalUnmatched"
id="ctl00_Main_gvErrors_ctl02_hfParamInternalUnmatched" value=
"EBC1-Test1" /> <input type="hidden" name=
"ctl00$Main$gvErrors$ctl02$hfParamInternalMatched" id=
"ctl00_Main_gvErrors_ctl02_hfParamInternalMatched" value="Test1" />
<table class="tableinfo c5" cellspacing="1" cellpadding="2" border="0">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th>Value Name</th>
<th>Current</th>
<th>Imported</th>
</tr>
<tr class="tableinfobody">
<td class="c3">Unit</td>
<td class="c4"></td>
<td class="c4">flag</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="tableinfobody tableinfoGray">
<td class="l"><span id="ctl00_Main_gvErrors_ctl03_lblName">Test2</span></td>
<td class="l">
<table id="ctl00_Main_gvErrors_ctl03_tblOptions" border="0">
<tbody>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbCancel" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbCancel" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbCancel">Cancel adding signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbReplace" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbReplace" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbReplace">Replace curent signal with
imported signal.</label></td>
</tr>
<tr>
<td><input id="ctl00_Main_gvErrors_ctl03_rdbRename" type="radio" name=
"ctl00$Main$gvErrors$ctl03$Options" value="rdbRename" /><label for=
"ctl00_Main_gvErrors_ctl03_rdbRename">Rename imported signal to:</label>
<input name="ctl00$Main$gvErrors$ctl03$txtNewName" type="text" value=
"Test2_1" id="ctl00_Main_gvErrors_ctl03_txtNewName" class="c2" /></td>
</tr>
</tbody>
</table>
</td>
<td class="l">
<input type="hidden" name="ctl00$Main$gvErrors$ctl03$hfParamInternalUnmatched"
id="ctl00_Main_gvErrors_ctl03_hfParamInternalUnmatched" value=
"HCMData3-Testw" /> <input type="hidden" name=
"ctl00$Main$gvErrors$ctl03$hfParamInternalMatched" id=
"ctl00_Main_gvErrors_ctl03_hfParamInternalMatched" value=
"PrimaryData3-Testw" />
<table class="tableinfo c5" cellspacing="1" cellpadding="2" border="0">
<tbody>
<tr class="tableinfobody tableinfoGray">
<th>Value Name</th>
<th>Current</th>
<th>Imported</th>
</tr>
<tr class="tableinfobody">
<td class="c3">SA</td>
<td class="c4">3, 239</td>
<td class="c4">239</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="tableinfobody tableinfoBlue">
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
Any help clearing this up would be greatly appreciated.
Use the value as a selector like so
function selectAll(option) {
var radio = $("input[value=" + option + "]");
$(radio).prop("checked", "checked");
}
$('input[type="button"]').on('click', function(){
var value = $(this).data('attr');
selectAll(value);
});
http://jsfiddle.net/3u3z4bLn/3/
I must be doing something stupidly wrong, but I'm not seeing it. On my site, I attach the JQuery TableSorter to a table and hope to have some sorting done, but clicks have no effect. No sorting happens. It just remains as a static table.
Here's a simplified JSFiddle of the problem I'm having:
http://jsfiddle.net/96AEE/3/
It's a very simple table with javascript as follows:
<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
<thead>
<tr class="nav">
<td>
<input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
</td>
<td>Gift Cert</td>
<td>Note</td>
<td>Order #</td>
<td>Order Date</td>
<td>Amount</td>
<td>Redeemed</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"></td>
<td>ss1q</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td> Sale
</td>
<td>true</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="103" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_103" name="check_103" />
</td>
<td>443ss</td>
<td>(1d10t) Arizona Tea</td>
<td>-</td>
<td>-</td>
<td>$50.00</td>
<td>-</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="50" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_50" name="check_50" />
</td>
<td>199e</td>
<td>(#9000) Over</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
</td>
<td>F990</td>
<td>($09aa) Trouble</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$(".tablesorter").tablesorter();
});
Is there something obvious I'm missing?
This is due to your markup on the HTML table.
Within the thead element, you need to use th tags instead of td.
<thead>
<tr>
<th></th>
...
</tr>
</thead>
Working JSfiddle:
http://jsfiddle.net/bybFK/
Try changing your header row to use <th> tags instead of <td> tags.
You are definitely neglecting something, when creating the header of your table; your are using <td> instead of using <th>
you also do not need to assign the class tablesorter to your table
<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
<thead>
<tr class="nav">
<th>
<input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
</th>
<th>Gift Cert</th>
<th>Note</th>
<th>Order #</th>
<th>Order Date</th>
<th>Amount</th>
<th>Redeemed</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"></td>
<td>ss1q</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td> Sale
</td>
<td>true</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
</td>
<td>F990</td>
<td>($09aa) Trouble</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$("#gift_certificates").tablesorter();
});
http://tablesorter.com/docs/