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

Question

我是 HTML、CSS 和 JavaScript 的新手。

我正在尝试 table 根据最后两列（或 table 上的“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

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

根据样本 table 这应该是 "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?

您可以为此使用 Javascript 中的 if else。查看 this 教程。我要做的是将默认颜色设置为 red，如果满足 2 个条件，将其更改为 green

你可以做到

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

  //change background to green

}

Answer 2

尝试这样的事情。关键是编写一个函数来添加一行，您已经完成了。在该函数中，您可以检查感兴趣的列的值。然后，如果它与目标匹配，则在将其添加到 table 之前，将特定的 class（在本例中为 'green'）添加到您创建的行。否则，添加一个不同的 class（在本例中为 'red'）。祝你好运！

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>

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

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

html

javascript

css

html-table