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

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

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

[! [Введите описание изображения здесь] [1]] [1]

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

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

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

[! [Введите описание изображения здесь] [2]] [2]

Я использую приведенный ниже код 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();