Строка подсветки не исчезает после нажатия на следующую строку таблицы

Question

Мне нужно создать желтый фон при выборе значка шестерни для пункта меню в строке таблицы, я попробовал приведенный ниже код для выделения строки таблицы,

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

При выборе меню из строки таблицы (скрытой) со значком шестеренки цвет фона подходит хорошо.

соответствующий HTML-файл ниже

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

Но когда я перехожу к следующей строке таблицы (не скрытой), цвет строки прошлой таблицы по-прежнему остается желтым и не исчезает.

Я использую код CSS ниже для создания выделения, когда я нажимаю на строку

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

Кто-нибудь может предложить мне код для этого. Я использую Ember 1.4.0.

Answer 1

Вы можете попробовать ниже jquery сбросить цвет фона, где событие будет происходить при фокусировке.

$(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
  });
});

Answer 2

Проверьте разницу между :first а также :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();