Highlight row is not getting disappear after I click the next table row

Question

I need to create background as yellow while selecting the gear icon for the menu option in the table row, I have tried the below code for highlighting the table row,

var view = Core.view.Menu.create({
    model: model,
    menuContext: { ibmm: ibmm },
    anchor: this.$(),
    highlight: this.$().parents('tr:first').css('background-color','yellow')
});
view.show();

While selecting the menu from the table row (hidden) with the gear icon, the background color is coming well.

[![enter image description here][1]][1]

corresponding html file is below

<tr id="ember23242" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">

But when I move to the next table row(non hidden), the past table row color is still in yellow color, not getting disappear.

[![enter image description here][2]][2]

I'm using the below css code for creating the highlight when i'm clicking the row

table.content-table.highlighted tr.content-row:focus {
  background: #FFFF99 none 0 0 repeat;
}

Can anybody suggest me code for this. I’m using Ember 1.4.0.

when you select another table row, is there any row event get triggered? can you share relevant html code? — Bhushan Kawadkar, Sep 05 '18 at 12:52
No @BhushanKawadkar, there is no row event get triggered. Wait I'll add the html and css code — Scott Don, Sep 05 '18 at 13:30
Hi @BhushanKawadkar, I have edited. 'ember-view content-row body-row-view container-view' this is common for all the table row — Scott Don, Sep 05 '18 at 13:34

score 0 · Answer 1 · answered Sep 05 '18 at 12:36

0

Check the difference between :first and :first-child

var view = Core.view.Menu.create({
    model: model,
    menuContext: { ibmm: ibmm },
    anchor: this.$(),
    highlight: this.$().parents('tr:first-child').css('background-color','yellow')
});
view.show();

answered Sep 05 '18 at 12:36

Canta

1,480
1
13
26

Hi @Arthur. When I tried your code, the background color even not showing when I click for an menu. Please see the updated question of mine – Scott Don Sep 05 '18 at 12:45

score 0 · Accepted Answer · answered Sep 05 '18 at 13:44

0

you can try below jquery to reset your background color where event will occur on focusout.

$(function(){
  $("table.content-table.highlighted tr.content-row").on("focusout", function(){
        $(this).css('background','#FFFF00 none 0 0 repeat'); // change color code as per your need
  });
});

answered Sep 05 '18 at 13:44

Bhushan Kawadkar

28,279
5
35
57

When I add this code also the existing table row is not getting disappear. Can you please check once again – Scott Don Sep 05 '18 at 14:04
Is that I need to remove this .css('background-color','yellow') – Scott Don Sep 05 '18 at 14:07
This is not working. Can you please suggest me some other code – Scott Don Sep 06 '18 at 05:53
can you please recreate your issue on code snipped or jsfiddle so that i can take a look at it – Bhushan Kawadkar Sep 06 '18 at 06:18

Highlight row is not getting disappear after I click the next table row

2 Answers2