click event highlighting not working [solved]
click event highlighting not working [solved]
H2wk
Posts: 14Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
$('#table_id tbody tr').live('click', function () {
$(this).toggleClass( 'row_selected' );
} );
[/code]
to add / remove the class.
Allan
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]
Allan
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?
Also if you have, then try using "background-color:#00FF99 !important;" to make sure these styles get priority.
Allan
[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]
[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
How do you suggest i modify the live click event so it deselects the previously selected row?
[code]
$(oTable.fnSettings().aoData).each(function () {
$(this.nTr).find("td").removeClass('row_selected');
});
$(event.target).parent().find("td").addClass('row_selected');
[/code]
Keep up the awesome work Allan.
Thanks again.