click event highlighting not working [solved]

H2wk

Hey guys...

I'm struggling to get the highlighting of a clicked row to work. I am using the demo_table_jui.css file. I've added the single click event to the below function an no highlighting is happening. I've tried most things and I've run outta ideas.

[code]
$('#table_id tbody tr').click(function () {
/* Get the position of the current data from the node */
var aPos = oTable.fnGetPosition(this);
/* Get the data array for this row */
var aData = oTable.fnGetData(aPos)[0];
});
[/code]
I have been using this click event:
[code]
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
[/code]

I have been using both the above with the: $(document).ready(function onpagefirstrun() jquery function.

Any help would be greatly appreciated.

allan

[code]
$('#table_id tbody tr').live('click', function () {
$(this).toggleClass( 'row_selected' );
} );
[/code]

to add / remove the class.

Allan

H2wk

Im a bit confused about your post allan. What are you suggesting?

I have tried just the live event in the onbodyload event but no luck yet.

I am using the right CSS Class?

This is my table initialization and click event.

[code]
oTable = $("#table_id").dataTable({
"bJQueryUI": true,
"bAutoWidth": true,
"aaData": rowsfinal,
"aoColumns": colsfinal,
"sScrollY": "200px",
"bPaginate": false
// "sPaginationType": "full_numbers"
});

$('#table_id tbody tr').click(function () {
/* Get the position of the current data from the node */
var aPos = oTable.fnGetPosition(this);
/* Get the data array for this row */
var aData = oTable.fnGetData(aPos)[0];
sendDataToServer('PERSONCLICK_' + aData);
$("#tabsdetails").tabs('option', 'selected', 0);

});
[/code]

H2wk

Any more suggestions?

allan

I was suggesting if you want to highlight a row on click, just use my click function above and have a class called "row_selected" defined in your CSS to highlight the row. If you look at the TR elements in Firebug you'll be able to see the rows have that class added and removed when you click on them - which, if I understand correctly, is what you were looking for in your original post :-)

Allan

H2wk

Hi allan. Thanks for the feedback...

So i did as you suggested and the code looks as follows.
[code]

Woody
Albertyn

[/code]

So it is applying the class. Currently i'm using the default row_selected css but this is not displaying in IE or chrome when the row is selected.
[code]
table.display tr.even.row_selected td {
background-color:#00FF99;
}
table.display tr.odd.row_selected td {
background-color:#66FF99;
}
[/code]

I am applying the odd/even row coloring as below
[code]
tr.odd {
background-color:#E2E4FF;
}
tr.even {
background-color:white;
}
[/code]

And if disable odd even rows this it doesn't seem to make a difference to the selected row.

I have checked my other css files in my project and none of them override these files.

Weird. Any suggestions?

allan

Have you got a class of "display" on the table tag?

Also if you have, then try using "background-color:#00FF99 !important;" to make sure these styles get priority.

Allan

H2wk

No tag on the table tag

[code]

[/code]

I've added the !important tag to the background colour no change. Ummmm... I am using auto themeing with jquery api....

[code]
oTable = $("#table_id").dataTable({
"bJQueryUI": true,
"bAutoWidth": true,
"aaData": rowsfinal,
"aoColumns": colsfinal,
"sScrollY": "200px",
"bPaginate": false
// "sPaginationType": "full_numbers"
});
[/code]

allan

Well given that the CSs selector you are using for the row highlighting is looking for table elements with a class of "display":

[code]
table.display tr.even.row_selected td {
[/code]

its not too surprising it doesn't work :-). You need to update either the selector or the table.

Allan

H2wk

bingo was his name oh.... Thank you allen... Not that good with css.

How do you suggest i modify the live click event so it deselects the previously selected row?

H2wk

Just tried using these funtions in the .live event. I've lost the highlighting. Any suggestions?

[code]
$(oTable.fnSettings().aoData).each(function () {
$(this.nTr).find("td").removeClass('row_selected');
});
$(event.target).parent().find("td").addClass('row_selected');
[/code]

H2wk

Altered my click event to use the click code for the example Allan created. All working 100%.

Keep up the awesome work Allan.

Thanks again.