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>

Do you have to use javascript for it or will a simple CSS rule suffice? — Shilly, Sep 06 '18 at 12:37
maybe you should show the *template* not the rendered DOM output.... — Lux, Sep 06 '18 at 12:40
@Lux, I'm using highlight: this.$().parents('tr:first') in the template — Scott Don, Sep 06 '18 at 12:43

score 2 · Answer 1 · answered Sep 06 '18 at 13:21

2

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>

answered Sep 06 '18 at 13:21

epascarello

204,599
20
195
236

I'm having two click function is there, here I mentioned 2nd click function. So Its taking 2nd time for getting this operation. – Scott Don Sep 07 '18 at 11:34
@ScottDon no clue what you are talking about since your orginal code showed no click functions, just a foucsout event. – epascarello Sep 07 '18 at 12:15
So you not want a selection at all with click? Really still have no clue what you want. – epascarello Sep 07 '18 at 12:19
I have edited the code, Please check. I'm included ur code on the click function. so only. Its working well on second click only. Please provide me some other suggestion. – Scott Don Sep 07 '18 at 12:28
well looks like you are binding the click function inside of a click method so of course it would have issues. – epascarello Sep 07 '18 at 12:44
Can you please give me any other suggestion regarding this. – Scott Don Sep 07 '18 at 12:53
Shall I ask this as new question?? – Scott Don Sep 07 '18 at 13:05
I have asked as new question on this stackoverflow.com/questions/52224647/…. Please see and suggest me on your free time – Scott Don Sep 07 '18 at 14:30

score 1 · Accepted Answer · answered Sep 06 '18 at 12:48

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>

answered Sep 06 '18 at 12:48

Lux

17,835
5
43
73

Its working fine. but highlighting is getting disappear on selecting the gear icon for all the menu. I need to highlight the row when I'm clicking the gear icon for the menu – Scott Don Sep 06 '18 at 13:03
you *really* should implement this with ember. – Lux Sep 06 '18 at 13:44
Its working good @lux. But for the first time of gear icon its not coming. after that for all the click its working perfectly – Scott Don Sep 07 '18 at 10:38
Hi @lux. I have asked new question on this https://stackoverflow.com/questions/52224647/click-inside-click-option-making-difficult-in-my-code. Please see and suggest me on your free time. – Scott Don Sep 07 '18 at 14:29

score 0 · Answer 3 · answered Sep 06 '18 at 12:43

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");
});

Need to remove the row highlight after select the next row

3 Answers3