Need to remove the row highlight after select the next row

Question

I need to remove the row highlight when I click on the next table row.

When I'm using the below code the table row is highlighted while clicking the menu in the gear icon. Then when I click for the another table row or gear icon the existing table row highlight is not getting removed. Can anybody please provide me suggestions on how to fix this.

    click: function () {
label: 'Delete LMD Definition',
icon: 'delete',
   $("table tbody").on("click", "tr", function () {
  $("tr.selected")  // find any selected rows
     .not(this)  // ignore the one that was clicked
     .removeClass("selected");  // remove the selection
   $(this).toggleClass("selected");  // toggle the selection clicked row
});
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="ember18549" class="ember-view content-table focus-group object-table container-view highlighted">
  <tbody>
    <tr id="ember18784" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
      <td id="ember19010" class="ember-view lmdd-menu actions container-view">
        <rs-icon id="ember19015" class="ember-view action-menu icon clickable-icon" title="Acciones y Transiciones" style="width: 1em; height: 1em; font-size: 20px">
          <icon glyph="action" class="action" style="font-size: 20px;">
          </icon>
        </rs-icon>
      </td>
      <td id="ember19021" class="ember-view content-data view view-core_component_data-view-mixin name">
      </td>
    </tr>
    <tr id="ember18784" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
      <td id="ember19010" class="ember-view lmdd-menu actions container-view">
        <rs-icon id="ember19015" class="ember-view action-menu icon clickable-icon" title="Acciones y Transiciones" style="width: 1em; height: 1em; font-size: 20px">
          <icon glyph="action" class="action" style="font-size: 20px;">
          </icon>
        </rs-icon>
      </td>
      <td id="ember19021" class="ember-view content-data view view-core_component_data-view-mixin name">
      </td>
    </tr>
  </tbody>
</table>

Answer 1

This is pure jQuery and I would strongly advise against this. You should use ember if you can. But because you already use jQuery for this and don't show your ember code this is the easiest thing for you to fix.

Just add a css class for the state. Then use removeClass on all other lines and addClass on the focused line.

$(function() {
  $("table.content-table.highlighted tr.content-row").on("focusout", function() {
    $('table.content-table.highlighted tr.content-row').removeClass('my-line');
    $(this).addClass('my-line');
  });
});

.my-line {
  background: #FFFF99 none 0 0 repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="content-table highlighted">
  <tbody>
    <tr class="content-row" tabindex="0" aria-label="">
      <td>
        FOO
      </td>
      <td>
        BAR
      </td>
    </tr>
    <tr class=" content-row" tabindex="0" aria-label="">
      <td>
        BAZ
      </td>
      <td>
        BAL
      </td>
    </tr>
  </tbody>
</table>

Answer 2

Try using

$("table.content-table").click(function(){
  $(this).toggleClass("highlighted");
});

Every time this table gets clicked the highlighted class will be added or removed.

Or the following code so every table gets unselected while the one you're clicking is getting selected.

$("table.content-table").click(function(){
  $("table.content-table").removeClass("highlighted");
  $(this).addClass("highlighted");
});

Answer 3

If you used classes and css rules, this would be very simple thing to do. Use CSS hover state for the highlight and use clickc to add/remove classes for the selection.

$("table tbody").on("click", "tr", function () {
  $("tr.selected")  // find any selected rows
     .not(this)  // ignore the one that was clicked
     .removeClass("selected");  // remove the selection
   $(this).toggleClass("selected");  // toggle the selection clicked row
})

table{
border-collapse: collapse;
}

table tbody td {
  border: 1px solid black;
  padding: 1em;
}

table tbody tr:hover {
  background-color: #CCC;
  cursor: pointer;
}


table tbody tr.selected {
  background-color: #9999AA;
}

table tbody tr.selected:hover {
  background-color: #BBB;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td><td>Pizza</td>
    </tr>
    <tr>
      <td>2</td><td>Taco</td>
    </tr>
    <tr>
      <td>3</td><td>Burger</td>
    </tr>
    <tr>
      <td>4</td><td>Salad</td>
    </tr>
</table>