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

Question

我对 HTML、CSS 和 JavaScript 完全陌生。

我正在尝试制作一个表格，该表格的行背景颜色会根据最后两列(或表格上的“td”)的值而变化。

1

如果“Nota Final”列中的值 >= 7 或“Frequência” >= 75，则此行的背景颜色变为绿色，否则，它变为红色。

我想要这个输出:

2

这是我的代码。这周开始研究了，所以，代码乱七八糟...

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

尝试这样的事情。关键是编写一个函数来添加一行，您已经完成了。在该函数中，您可以检查感兴趣的列的值。然后，如果它符合目标，则在将其添加到表之前将特定类(在本例中为“绿色”)添加到您创建的行。否则，添加一个不同的类(在本例中为“红色”)。祝你好运!

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>