How to change color of selected row on onmousedown event

Question

I am trying to change the color of the selected row from a table on a onmousedown event and reset all others (or keep them the same) . Only one row can be red at a time while all others are green.

What I have tried:

function HighLight(id) {
  var rows = $('#tbl > tbody > tr').each(function(elem) {
    elem.style.background = 'green';
  })
  var tr = document.getElementById(id);
  tr.style.background = 'red';
}

<table id="tbl">
  <tr id="tr1" style="background-color:aquamarine" onmousedown="Highlight(e)">
    <td>
      v1
    </td>
  </tr>
  <tr id="tr2" style="background-color:aquamarine" onmousedown="Highlight(e)">
    <td>
      v2
    </td>
  </tr>
  <tr id="tr3" style="background-color:aquamarine" onmousedown="Highlight(e)">
    <td>
      v3
    </td>
  </tr>
</table>

Ideally I would like to store the old selected row so that I won't reset all others at each new selection, but in case I can't reset all would do it.

P.S I need to make due with the id that i am provided.I am using interop so the id is coming from the exterior. All my tr have that method injected in them.

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

Here is a quick example on how can you do that.

$("table tr").on('click', function(){
  $(".highlighted").removeClass("highlighted");
  $(this).addClass("highlighted");
});

table tr {
  background: green;
}
table tr.highlighted {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl">
  <tr id="tr1">
    <td>
      v1
    </td>
  </tr>
  <tr id="tr2">
    <td>
      v2
    </td>
  </tr>
  <tr id="tr3">
    <td>
      v3
    </td>
  </tr>
</table>

Here is how it works:

It binds a click event to every row in the table (tr),
Every time you click on a row, all elements that has a class called highlighted loose it and the row that you clicked gets the class highlighted,

In css you can change the default background color for all rows and the color after highlighting.

If you don't want to use a css, here is similar function but instead of adding and removing class it does the same with the inline css property.

$("table tr").on('click', function(){
  $("table tr").css("background", "green");
  $(this).css("background", "red");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl">
  <tr id="tr1" style="background: green;">
    <td>
      v1
    </td>
  </tr>
  <tr id="tr2" style="background: green;">
    <td>
      v2
    </td>
  </tr>
  <tr id="tr3" style="background: green;">
    <td>
      v3
    </td>
  </tr>
</table>

But I do not recommend the second solution.

score 2 · Accepted Answer · answered Feb 15 '19 at 10:13

The function name is wrong its Highlight not HighLight

To pass the id of the element on function call you cannot just pass any variable(e in your case). Use this.getAttribute('id') to get the id.

In the each() the argument elem represented the index of the element and not the element itself. Introduce another argument for index.

function Highlight(id) {
  var rows = $('#tbl > tbody > tr').each(function(i,elem) {
    elem.style.background = 'green';
  })
  var tr = document.getElementById(id);
  tr.style.background = 'red';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl">
  <tr id="tr1" style="background-color:aquamarine" onmousedown="Highlight(this.getAttribute('id'))">
    <td>
      v1
    </td>
  </tr>
  <tr id="tr2" style="background-color:aquamarine" onmousedown="Highlight(this.getAttribute('id'))">
    <td>
      v2
    </td>
  </tr>
  <tr id="tr3" style="background-color:aquamarine" onmousedown="Highlight(this.getAttribute('id'))">
    <td>
      v3
    </td>
  </tr>
</table>

score 2 · Answer 3 · answered Feb 15 '19 at 10:20

You can have two css classes; one for selected row and other for remaining rows. On click of the row, you can add the "selected" class to that row.

$("#tbl tr").click(function(){
 
 var $this = $(this);
 //remove the previous row selection, if any
 $("#tbl tr.selected").removeClass("selected");
 //add selected class to the current row
 $this.addClass("selected");

});

#tbl tr{
background-color: aquamarine;
}

#tbl tr.selected{
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tbl">
  <tr id="tr1">
    <td>
      v1
    </td>
  </tr>
  <tr id="tr2" >
    <td>
      v2
    </td>
  </tr>
  <tr id="tr3" >
    <td>
      v3
    </td>
  </tr>
</table>

And when you say `this` how does it know to refer to a `tr` or a `td` ? — Bercovici Adrian, Feb 15 '19 at 10:33
@BercoviciAdrian - depends on the click handler -> here the click is registered for `tr` -> `$("#tbl tr").click` — Developer, Feb 15 '19 at 12:53

score 1 · Answer 4 · answered Feb 15 '19 at 10:23

You can do like this.by using class you can carry out other operations

$("#tbl").on("click", "tr", function() {
  $(' tr').removeClass("Red")

  $(this).addClass("Red")
});

.Red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl">
  <tr id="tr1">
    <td>
      v1
    </td>
  </tr>
  <tr id="tr2">
    <td>
      v2
    </td>
  </tr>
  <tr id="tr3">
    <td>
      v3
    </td>
  </tr>
</table>

yunzen · Answer 5 · 2019-02-15T12:23:16.017

Several issues:

JS is case sensitive, so Highlight and HighLight (capital L) is not the same. I renamed the HighLight function to Highlight (lowercase l)
Use parameter this on function call in event handler attribute. This hands over the HTML element of the event handler attribute over to the event handler function (Highlight in your case)
Callback function of jQuery's each method has the index as a first parameter and the element as second

This makes your code work

function Highlight(tr) {
  var rows = $('#tbl > tbody > tr').each(function(index, elem) {
    elem.style.backgroundColor = 'green';
  })
  tr.style.background = 'red';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tbl">
  <tr id="tr1" style="background-color:aquamarine" onmousedown="Highlight(this)">
    <td>
      v1
    </td>
    <td>
      v1
    </td>
    <td>
      v1
    </td>
  </tr>
  <tr id="tr2" style="background-color:aquamarine" onmousedown="Highlight(this)">
    <td>
      v2
    </td>
    <td>
      v2
    </td>
    <td>
      v2
    </td>
  </tr>
  <tr id="tr3" style="background-color:aquamarine" onmousedown="Highlight(this)">
    <td>
      v3
    </td>
    <td>
      v3
    </td>
    <td>
      v3
    </td>
  </tr>

</table>

There are some more things you can do to enhance your code

Don't use style in your JS code, but set classes for CSS
Don't use HTML onmousedown attributes, but JS addEventListeners
Replace jQuery code with VanillaJS

console.clear()
const rows = document.querySelectorAll('#tbl > tbody > tr');
for (row of rows) {
  row.addEventListener('mousedown', Highlight)
}

function Highlight(e) {
  e.preventDefault()
  const tr = this
  const rows = document.querySelectorAll('#tbl > tbody > tr');
  for (row of rows) {
    row.classList.remove('highlight')
    row.classList.add('highlight-siblings')
  }
  tr.classList.remove('highlight-siblings')
  tr.classList.add('highlight')
}

/* 1. */
tr {
  background-color: aquamarine;
}
tr.highlight-siblings{
  background-color: green;
}
tr.highlight{
  background-color: red;
}

<table id="tbl">
  <tr>
    <td>
      v1
    </td>
    <td>
      v1
    </td>
    <td>
      v1
    </td>
  </tr>
  <tr>
    <td>
      v2
    </td>
    <td>
      v2
    </td>
    <td>
      v2
    </td>
  </tr>
  <tr>
    <td>
      v3
    </td>
    <td>
      v3
    </td>
    <td>
      v3
    </td>
  </tr>

</table>

How to change color of selected row on onmousedown event

5 Answers5

Here is how it works: