如何使用 HTML、CSS 和 JavaScript 根据值更改行的背景颜色？

Question

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>

Answer 1

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

Answer 2

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>