Applying class "row_selected" to a row through a checkbox's click event

yehlaina

Hi all,

I have a datatable with checkboxes in the leftmost column, with the intention of allowing users to select multiple rows by clicking on the check box.

Here's my table definition, which creates the table just fine (it populates using a json array returned from ajax, which I doctored to include a column populated with "0" underneath the checkbox.

[code]
var oUnMatchedTable = null;

$(document).ready(function() {

oUnMatchedTable = $('#gUnMatched').dataTable({
"aoColumns":
[
{ "fnRender": function () {return '';} },
{ "sTitle": "BU" }, // index 0, BU code
{ "sTitle": "INSNAME" }, // index 1, insurance name
{ "sTitle": "ADDRESS" }, // index 2, address
{ "sTitle": "ADDRESS2" }, // index 3, address2
{ "sTitle": "CITY" }, // index 4, city
{ "sTitle": "STATE" }, // index 5, state
{ "sTitle": "ZIP" }, // index 6, ZIP
{ "sTitle": "STATUS", "sClass": "center" }, // index 7, status
{ "sTitle": "LASTUPDATED", "sClass": "center" }, // index 8, last updated
{ "sTitle": "COUNTER" }, // index 9, counter
{ "bVisible": false }, // index 10, unmatched id
{ "bVisible": false }, // index 11, lab code
{ "bVisible": false } // index 12, modified by
],
"aaSorting": [[10,'desc']],
"sRowSelect": "multi",
"aButtons": [ "select_all", "select_none" ]

});

[/code]

Here's a sample json array to populate the table:
[ ['0','ATL','CV','GT1','--','--','--','--','--','02/27/2012 15:10','14','30360','TAT','IMDBAPP'],['0','
ATL','BC','GT1','--','--','--','--','L','04/04/2012 14:54','12','30216','TAT','caitee.x.cruelle'],['0','ATL','CN','GT1','--','--'
,'--','--','--','02/27/2012 15:10','4','30359','TAT','IMDBAPP'],['0','ATL','MM','GT1','--','--','--','--','--','02/27/2012 15:10','4
','30361','TAT','IMDBAPP'],['0','ATL','99','GT1','--','--','--','--','--','04/18/2013 16:03','4','30362','TAT','temp.y.consult'],['
0','ATL','CIGNA PPO','PO BOX 188039','--','CHATTANOOGA','TN','37422','--','04/18/2013 16:02','2','27277','STL','temp.y.consult'],['
0','ATL','MEDICARE','2333 SOUTH','--','ATLANTA','GA','30161','--','02/27/2012 14:55','2','30327','TNE','IMDBAPP'],['0','ATL','--','G
T1','--','--','--','--','--','02/27/2012 15:12','2','30378','TAT','IMDBAPP'],['0','ATL','CIGNA PPO','PO BOX 188039','--','CHATTANOOG
A','TN','37422','L','11/03/2011 11:51','1','22884','AHL','BANSAA00'] ]


Here's the event procedure for the checkbox. The event definitely triggers and I have verified that I can determine checked vs unchecked.

[code]
function fnUnmatchedCheckboxClickHandler(oLocal)
{
var s = $(oLocal).is(':checked');
var oRow = fnGetNodes($(oLocal).closest('tr')[0])
if (s == true)
oRow.addClass('row_selected'); //doesnt' work, I know
else
oRow.removeClass('row_selected');
}
[/code]

So, how do I add the "row_selected" css class to the ROW that the checkbox is in. I can get the ID number of the row from "closest('tr')[0], but the row itself? Maybe remove the [0]? (Will check and get back to you.)

This is my first post here. It will take me a while to dummy up a whole working warfile that won't violate my company's compliance and proprietary info policies.

Thanks!

yehlaina

Found the solution. See below:
[code]
function fnUnmatchedCheckboxClickHandler(oLocal)
{
var s = $(oLocal).is(':checked');
if (s == true)
{
$(oLocal).closest('tr').addClass('row_selected');
}
else
{
$(oLocal).closest('tr').removeClass('row_selected');
}
}
[/code]