RemoveClass Row_Selected not working

jlivingston

http://debug.datatables.net/ebuxuw

I can select a row and it will highlight. If I select a second row it will also highlight but I want, also, for the first rows highlight to disappear but it is not working. Please advise.

allan

We'd need to see a full test case since the code that will be doing what you need is outside the reach of the debugger. How are you trying to remove the previously applied class?

Allan

jlivingston

I am having problems adding a test case. I have other issue to deal with for now and this is one of my low priority issues but I will get back to it when I have time. In the mean time I have added a code snippet below. When this is removed rows do not highlight when I click on them. When not removed I can highlight rows but when I click another row the highlight on the previous row does not go away.

$('#datalist tbody tr').live('click', function (event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).find("td").removeClass('row_selected');
});
$(event.target).parent().find("td").addClass('row-modified');
} );

allan

> oTable.fnSettings().aoData

I would suggest never using the contents of fnSettings. You should be able to get the information you need via the API. In this case fnGetNodes or the `$` method.

Allan

jlivingston

OK, I now have it as:
$('#datalist tbody tr').live('click', function (event) {
$(oTable.fnGetNodes()).each(function (){
$(this.nTr).find("td").removeClass('row-modified');
});
$(event.target).parent().find("td").addClass('row-modified');
} );

The rows highlight OK but remain highlighted when selected in other rows. If I remove this completely then the selected row does not highlight. I added a debugger line in the EACH section and it is definitely going through that section (I have ten rows and it hit the debugger line 10 times.).

jlivingston

More info - I highlighted the top three rows and went into firebug - View Source - View Generated Source and the top three table rows had this class "" in each td.

allan

not sure what `this.nTr` is in that context.

Can you not just do:

[code]
$('td.row-modified', oTable.fnGetNodes() ).removeClass( 'row-modified' );
[/code]

Allan

jlivingston

FIXED. While in Firebug along with the row-modified I noticed that row_selected was moving from row to row based on selection. So, I removed:
$('#datalist tbody tr').live('click', function (event) {
$(oTable.fnGetNodes()).each(function (){
$(this.nTr).find("td").removeClass('row-modified');
});
$(event.target).parent().find("td").addClass('row-modified');
} );

and added this to the style section:
.row_selected
{
background-color: #ccc !important;
}

Now it works.