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



    Actions EAVP
    
    
    
    
    
    
    



    

        
            


    

Liste des actions



    
        
        id
        titre
        date_rendu
        statut
        date_insertion
        zone_emettrice
        zone_receptrice
        owner
        

        
        

        
            
            
        

            Detail

            
            1
            Data
            2022-05-20 22:00:00+00:00
            A faire
            2022-05-06 13:17:07+00:00
            Data
            Data
            Data

            
        

        
        
        
            
            
        

            Detail
            2
            Data
            2022-05-24 22:00:00+00:00
            Cloture
            2022-05-06 13:18:34+00:00
            Data
            Data
            Data

            
        

        
        
        
            
            
        

            Detail
            5
            Data
            2022-05-23 22:00:00+00:00
            En cours
            2022-05-06 14:24:29+00:00
            Data
            Data
            Data

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 !

Simone Rossaini · Accepted Answer

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


  
    
      
      
      

      Detail
    
    13
    Data
    May 12, 2022, midnight
    Cloture
    May 9, 2022, 11:30 a.m. 
    Data
    Data
    Data
  
  
    
      
      
      

      Detail
    
    13
    Data
    May 12, 2022, midnight
    Cloture
    May 9, 2022, 11:30 a.m. 
    Data
    Data
    Data
  
  
    
      
      
      

      Detail
    
    13
    Data
    May 12, 2022, midnight
    Cloture
    May 9, 2022, 11:30 a.m. 
    Data
    Data
    Data

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




  

    

      
      
      

      Liste des actions

      

        
          
          id
          titre
          date_rendu
          statut
          date_insertion
          zone_emettrice
          zone_receptrice
          owner



          

            
              
              
              

              Detail


            1
            Data
            2022-05-20 22:00:00+00:00
            A faire
            2022-05-06 13:17:07+00:00
            Data
            Data
            Data


          


          
            
              
              
              

              Detail
            2
            Data
            2022-05-24 22:00:00+00:00
            Cloture
            2022-05-06 13:18:34+00:00
            Data
            Data
            Data


          


          
            
              
              
              

              Detail
            5
            Data
            2022-05-23 22:00:00+00:00
            En cours
            2022-05-06 14:24:29+00:00
            Data
            Data
            Data

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.

Color table's row on click using Javascript and CSS

Answers (1)

Related Questions

Color table&#39;s row on click using Javascript and CSS

Answers (1)

Related Questions

Color table's row on click using Javascript and CSS