How can I change the background color of a row based on the value using HTML, CSS and JavaScript?

user_16443218 0
Viewed 728

I'm completely new in HTML, CSS and JavaScript.

I'm trying to do a table that background color of the row changes based on the value of the last two columns (or the "td" on the table).

1

If the value in the column "Nota Final" >= 7 or "Frequência" >= 75, so the background color of this row changes to green, else, it changes to red.

I want this output:

2

Here is my code. I started to study it this week, so, sorry for the messy code...

var list1 = [];
var list2 = [];
var list3 = [];
var list4 = [];
var list5 = [];
var list6 = [];

var n = 1;
var x = 0;

function AddRow(){
    var AddRown = document.getElementById('show');
    var NewRow = AddRown.insertRow(n);

    list1[x] = n;
    list2[x] = document.getElementById("fname").value + " " + document.getElementById("lname").value;
    list3[x] = document.getElementById("grade1").value;
    list4[x] = document.getElementById("grade2").value;

    //Nota final
    var n1 = document.getElementById("grade1").value;
    var n2 = document.getElementById("grade2").value;
    var mean = (Number(n1)+Number(n2))/2;
    
    list5[x] = mean;
    list6[x] = document.getElementById("frequency").value + "%";

    var cel1 = NewRow.insertCell(0);
    var cel2 = NewRow.insertCell(1);
    var cel3 = NewRow.insertCell(2);
    var cel4 = NewRow.insertCell(3);
    var cel5 = NewRow.insertCell(4);
    var cel6 = NewRow.insertCell(5);

    cel1.innerHTML = list1[x];
    cel2.innerHTML = list2[x];
    cel3.innerHTML = list3[x];
    cel4.innerHTML = list4[x];
    cel5.innerHTML = list5[x];
    cel6.innerHTML = list6[x];

    n++;
    x++;
}
#show {
    background-color: black;
}

#show th {
    padding: 13px;
}

#show td {
    padding: 13px;
    background-color: #ffffff;
    text-align: center;
}
        <table id="show">
            <thead>
                <tr id="title">
                    <th>ID</th>
                    <th>Nome</th>
                    <th>1° Semestre</th>
                    <th>2° Semestre</th>
          <th>Nota Final</th>
          <th>Frequência</th>
                </tr>
            </thead>
        </table>

html-table css html javascript
2 Answers

"Nota Final" >= 7 or "Frequência" >= 75

From the sample table this should be "Nota Final" >= 7 AND "Frequência" >= 75

How can I change the background color of a row based on the value using HTML, CSS and JavaScript?

You can use an if else in Javascript for this. Check out this tutorial. What I would do is set the default color to red and if the 2 conditions are met, change it to green

You can do

if (document.getElementById("frequency").value>=75 && document.getElementById("notaFinal").value>=7){

  //change background to green

}

user_142480760

Try something like this. The key would be to write a function to add a row, which you've already done. In that function, you can check the values for the column(s) of interest. Then, if it matches the goal, add a specific class (in this case, 'green') to the row you created before you add it to the table. Otherwise, add a different class ('red', in this example). Good luck!

function AddRow(listOfParams){
  var table = document.getElementById("show");
  var row = document.createElement("tr");
  for (i=0;i<6;i++){
    var td = document.createElement("td");
    td.innerHTML = listOfParams[i];
    row.appendChild(td);
  }
  if (listOfParams[4] >= 7 || listOfParams[5] >= 75){
      row.classList.add("green");
  }
  else{
    row.classList.add("red");
  }
  table.append(row);
}
AddRow([1,"oliver",6.5,7.8,7.2,90]); // add one row

// add multiple rows
const ids = [2,3];
const nomes = ['name1','name2'];
const semester1 = [4.5,3.2];
const semester2 = [3.5,4.4];
const final = [7,6];
const frequencias = [70,70];

for (row=0;row<ids.length;row++){
  AddRow([ids[row],nomes[row],semester1[row],semester2[row],final[row],frequencias[row]]);
}
#show {
    background-color: black;
}

#show th {
    padding: 13px;
    color: white;
}

#show td {
    padding: 13px;
    text-align: center;
}

.green{
  background-color:green !important;
 }
 
.red{
  background-color:red !important;
 }
<table id="show">
            <thead>
                <tr id="title">
                    <th>ID</th>
                    <th>Nome</th>
                    <th>1° Semestre</th>
                    <th>2° Semestre</th>
          <th>Nota Final</th>
          <th>Frequência</th>
                </tr>
            </thead>
        </table>

user_82222660
Related