neotable colored row

#1 · January 7, 2022, 6:39 pm

I need to color the selected rows. I have found this script in the forum. I paste it into page enter tab. This is ok but does not remove the color of the previous row when a new row is selected. Thus I have 3 tables in my page, I need this mechanism for all tables.

BeginJS
$("tr").click(function(){
this.style.backgroundColor="#FFE4C4";
});
EndJS

#2 · January 8, 2022, 7:14 am

Hi @phil78

This code was tested and worked like a charm. See the attached animated gif.

$("tr").click(function() {
  // We change the background color to white for all rows
  $('tr').each(function() {
    this.style.backgroundColor = "white";
  });

  //Now we change the background color to the clicked row
  this.style.backgroundColor = "#FFE4C4";
});

Happy coding!

Uploaded files:

You need to login to have access to uploads.

luishp, Vadim and joferar333 have reacted to this post.

#3 · January 8, 2022, 3:37 pm

Hi @asleycruz Thanks it works well, but only for the first table and I as said I would like the same for the 3 tables of my page.

#4 · January 8, 2022, 4:20 pm

Hi @phil78

Try this code. I'm not in PC right now so I didn't tested it. Your tables must have IDs (id="Table1").

The below code should work only for Table1, do the same for others tables (Table2, Table3...). Hope this helps.

$("#Table1 tr").click(function() {
  $('#Table1 tr').each(function() {
    this.style.backgroundColor = "white";
  });
  this.style.backgroundColor = "#FFE4C4";
});

javadrajabihakami has reacted to this post.

#5 · January 9, 2022, 7:35 pm

Hi @asleycruz I have tried, it is always ok for the first table but not for the 2 others except for their header !

BeginJS
$("#cContinent tr").click(function() {
$('#cContinent tr').each(function() {
this.style.backgroundColor = "white";
});
this.style.backgroundColor = "#FFE4C4";
});
$("#cPays tr").click(function() {
$('#cPays tr').each(function() {
this.style.backgroundColor = "white";
});
this.style.backgroundColor = "#FFE4C4";
});
$("#cVille tr").click(function() {
$('#cVille tr').each(function() {
this.style.backgroundColor = "white";
});
this.style.backgroundColor = "#FFE4C4";
});

EndJS

#6 · January 10, 2022, 1:04 pm

I think the problem is that all columns are editable.

neotable colored row - Forum

neotable colored row