Color table's row on click using Javascript and CSS

Question

I have a table and I would like to color a row on click using Javascript.

Here is my code, there are three rows in the table, two functions in javascript and one CSS file :

function changeColor() {
  var td = $("#myTable" + " td");
  $.each(td, function(i) {

    if ($(td[i]).html() === 'Cloture') {
      $(td[i]).addClass("green");
    } else if ($(td[i]).html() === 'A faire') {
      $(td[i]).addClass("red");
    } else if ($(td[i]).html() === 'En cours') {
      $(td[i]).addClass("orange");
    }
    else {
      $(td[i]).addClass("white");
    }
  });
}

changeColor();

function selectRow() {
  var table = document.getElementById("myTable");
  [...table.rows].forEach(el => {
    el.addEventListener('click', () => {
      el.classList.toggle('selected-row');
    });
  });
}

selectRow();

 td{
            text-align: center;
            color: white;
            background: #FFFFFF;
            padding: 10px;
        }

        tr:hover {background-color: #FFE56C;}

        td:last-child {
          border-right: 1px;
        }
        .green {
          background-color: #239e58 !important;
        }
        .red {
          background-color: #ff4e33 !important;
        }
        .orange {
          background-color: #ffd633 !important;
        }

        .white {
          background-color: white !important;
        }

        .table-row {
            cursor: pointer;
            }

        .selected-row {
          background-color: #FFD200 !important;
          color: white;
        }

<html>

    <title>Actions EAVP</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/1.0.10/datepicker.min.js" integrity="sha512-RCgrAvvoLpP7KVgTkTctrUdv7C6t7Un3p1iaoPr1++3pybCyCsCZZN7QEHMZTcJTmcJ7jzexTO+eFpHk4OCFAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link rel="stylesheet" type="text/css" href="/static/polls/style.css" />

<div class="container">

    <body style="background-color: white";>

        <section class="content">
            
<div>
</div>
    <br>
<h3 style="color: black;">Liste des actions</h3>

<div style="overflow-x:auto;">

    <table class="list_homepage" id="myTable">
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center"></th>
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">id</th>
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">titre</th>
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">date_rendu</th>
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">statut</th>
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">date_insertion</th>
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">zone_emettrice</th>
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">zone_receptrice</th>
        <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">owner</th>
        

        
        <tr class="table-row">
        <td style="border-bottom: 1px solid black;">
            <a style="color: #ff0000; text-align: center;" href="/action/1/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
            <a style="color: #3CB4E6; text-align: center;" href="/action/1/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
        <br>
            <a style="; text-align: center;" href="/action/1/">Detail</a></td>

            
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">1</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-20 22:00:00+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">A faire</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-06 13:17:07+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>

            
        </tr>

        
        <tr class="table-row">
        <td style="border-bottom: 1px solid black;">
            <a style="color: #ff0000; text-align: center;" href="/action/2/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
            <a style="color: #3CB4E6; text-align: center;" href="/action/2/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
        <br>
            <a style="; text-align: center;" href="/action/2/">Detail</a></td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-24 22:00:00+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Cloture</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-06 13:18:34+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>

            
        </tr>

        
        <tr class="table-row">
        <td style="border-bottom: 1px solid black;">
            <a style="color: #ff0000; text-align: center;" href="/action/5/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
            <a style="color: #3CB4E6; text-align: center;" href="/action/5/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
        <br>
            <a style="; text-align: center;" href="/action/5/">Detail</a></td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">5</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-23 22:00:00+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">En cours</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-06 14:24:29+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>

            
        </tr>
    </table>

</div>

As you can see I have another javascript function that works well, but the function to color rows on click doesn't work.

If someone has a solution to my problem that would be great !

Instead of repeating the same styles for every <td>, consider using CSS selectors. — Rashad Saleh
– Rashad Saleh, Commented May 17, 2022 at 10:18
Actually my HTML table is automatically generated by python using Django so I'm not sure if CSS selectors would work, but thank you for your suggestion ! — Romain Sconza
– Romain Sconza, Commented May 17, 2022 at 10:29

Simone Rossaini · Accepted Answer · 2022-05-18 08:36:09Z

You can reach your object with few lines like:

function selectRow() {
  var table = document.getElementById("myTable");
  [...table.rows].forEach(el => {
    el.addEventListener('click', () => {
      el.classList.toggle('selected-row');
    });
  });
}

selectRow();

.table-row {
  cursor: pointer;
}

.selected-row {
  background-color: #FFD200 !important;
  color: white;
}

<table id="myTable">
  <tr class="table-row">
    <td style="border-bottom: 1px solid black;">
      <a style="color: #ff0000; text-align: center;" href="/action/13/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
      <a style="color: #3CB4E6; text-align: center;" href="/action/13/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
      <br>
      <a style="; text-align: center;" href="/action/13/">Detail</a>
    </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">13</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 12, 2022, midnight</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Cloture</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 9, 2022, 11:30 a.m. </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
  </tr>
  <tr class="table-row">
    <td style="border-bottom: 1px solid black;">
      <a style="color: #ff0000; text-align: center;" href="/action/13/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
      <a style="color: #3CB4E6; text-align: center;" href="/action/13/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
      <br>
      <a style="; text-align: center;" href="/action/13/">Detail</a>
    </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">13</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 12, 2022, midnight</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Cloture</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 9, 2022, 11:30 a.m. </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
  </tr>
  <tr class="table-row">
    <td style="border-bottom: 1px solid black;">
      <a style="color: #ff0000; text-align: center;" href="/action/13/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
      <a style="color: #3CB4E6; text-align: center;" href="/action/13/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
      <br>
      <a style="; text-align: center;" href="/action/13/">Detail</a>
    </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">13</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 12, 2022, midnight</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Cloture</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">May 9, 2022, 11:30 a.m. </td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
    <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
  </tr>
</table>

You can use table.rows with spread ... for create an array of all rows then just use addEventListener with forEach for assign a toggle click class.

Reference:

with your new snippet:

function changeColor() {
  var td = $("#myTable" + " td");
  $.each(td, function(i) {

    if ($(td[i]).html() === 'Cloture') {
      $(td[i]).addClass("green");
    } else if ($(td[i]).html() === 'A faire') {
      $(td[i]).addClass("red");
    } else if ($(td[i]).html() === 'En cours') {
      $(td[i]).addClass("orange");
    }
  });
}

changeColor();

function selectRow() {
  var table = document.getElementById("myTable");
  [...table.rows].forEach(el => {
    el.addEventListener('click', () => {
      el.classList.toggle('selected-row');
    });
  });
}

selectRow();

td {
  text-align: center;
  color: white;
  padding: 10px;
}

tr:hover {
  background-color: #FFE56C;
}

td:last-child {
  border-right: 1px;
}

.green {
  background-color: #239e58 !important;
}

.red {
  background-color: #ff4e33 !important;
}

.orange {
  background-color: #ffd633 !important;
}

.white {
  background-color: white !important;
}

.table-row {
  cursor: pointer;
}

.selected-row {
  background-color: #FFD200 !important;
  color: white;
}

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

  <body style="background-color: white" ;>

    <section class="content">

      <div>
      </div>
      <br>
      <h3 style="color: black;">Liste des actions</h3>

      <div style="overflow-x:auto;">

        <table class="list_homepage" id="myTable">
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center"></th>
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">id</th>
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">titre</th>
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">date_rendu</th>
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">statut</th>
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">date_insertion</th>
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">zone_emettrice</th>
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">zone_receptrice</th>
          <th style="color: white; background-color:  #03234B; padding: 5px; border: 1px solid white; text-align: center">owner</th>



          <tr class="table-row">
            <td style="border-bottom: 1px solid black;">
              <a style="color: #ff0000; text-align: center;" href="/action/1/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
              <a style="color: #3CB4E6; text-align: center;" href="/action/1/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
              <br>
              <a style="; text-align: center;" href="/action/1/">Detail</a></td>


            <td style="color: black; text-align: center; border-bottom: 1px solid black;">1</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-20 22:00:00+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">A faire</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-06 13:17:07+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>


          </tr>


          <tr class="table-row">
            <td style="border-bottom: 1px solid black;">
              <a style="color: #ff0000; text-align: center;" href="/action/2/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
              <a style="color: #3CB4E6; text-align: center;" href="/action/2/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
              <br>
              <a style="; text-align: center;" href="/action/2/">Detail</a></td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-24 22:00:00+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Cloture</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-06 13:18:34+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>


          </tr>


          <tr class="table-row">
            <td style="border-bottom: 1px solid black;">
              <a style="color: #ff0000; text-align: center;" href="/action/5/delete/"><i class="bi bi-trash3" style="font-size: 30px;"></i></a>
              <a style="color: #3CB4E6; text-align: center;" href="/action/5/update/"><i class="bi bi-pencil-square" style="font-size: 30px;"></i></a>
              <br>
              <a style="; text-align: center;" href="/action/5/">Detail</a></td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">5</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-23 22:00:00+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">En cours</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">2022-05-06 14:24:29+00:00</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>
            <td style="color: black; text-align: center; border-bottom: 1px solid black;">Data</td>


          </tr>
        </table>

      </div>

You have two problem:

In your jquery code you add class white, but if you color all column you will not see background of row (so i deleted it)
And same situation for class css td with background white.

If you want your answer to be more specific for the question, by reading his code he seems that he doesn't want the first column to be selectable (for i = 1), and unselect every other rows
@Cédric He did not specify it in the question, I think that unfortunately he copied the code without knowing the meaning or is it simply a mistake
Thank you for your answer Simone, I don't know why it is not working in my code, but I have seen the result with the run code snippet option
Very strange, have you a live version for see your result? Look at the console.log to make sure you have no other errors.
You are the best thank you for all your help and explanations ! @SimoneRossaini

Collectives™ on Stack Overflow

Color table's row on click using Javascript and CSS

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related