How to change the background color of an html table with javascript

Asked

Viewed 325 times

0

I have a table that will be listed with several values, I want that when the field has the value "D" it will have the red background, and when the result is "A", it will be green. Follow the example of how I’m trying to do more isn’t working. I’d be grateful if someone could help me.

var fundo = document.getElementById('td').value;

if (fundo == 'D') {
  fundo.style.backgroundColor = "red";
} else {
  fundo.style.backgroundColor = "green";
}
<html>
<table>
  <tr>
    <th>Codigo</th>
    <th>Nome</th>
    <th>Sitiação</th>
  </tr>
  <tr>
    <td>0001</td>
    <td>Felipe</td>
    <td>A</td>
  </tr>
  <tr>
    <td>0002</td>
    <td>Carlos</td>
    <td>D</td>
  </tr>
  <tr>
    <td>0003</td>
    <td>Amanada</td>
    <td>A</td>
  </tr>
</table>

</html>

javascript

2 answers

3


First thing I noticed is that your goal is to separate some cells from a table and to color according to the criterion whose situation is assigned to a person.

It turns out that the way it addresses the problem there is no practical possibility to distinguish between the cells in your table.

See your refactored code.

//Seleciona todos os elementos <td> do documento.
let tds = document.querySelectorAll("td");

//Para cada elemento <td>...
tds.forEach((td) => {
  //...Se texto for "D" colore em vermelho caso contrário colore em verde.
  td.style.backgroundColor = (td.innerText == 'D') ? "red" : "green";
});
<html>
<table>
  <tr>
    <th>Codigo</th>
    <th>Nome</th>
    <th>Situação</th>
  </tr>
  <tr>
    <td>0001</td>
    <td>Felipe</td>
    <td>A</td>
  </tr>
  <tr>
    <td>0002</td>
    <td>Carlos</td>
    <td>D</td>
  </tr>
  <tr>
    <td>0003</td>
    <td>Amanada</td>
    <td>A</td>
  </tr>
</table>

</html>

Initially I used the method Document.querySelectorAll(), which returns a list of elements present in the given document a selector, next to the selector td to get all table cells and then went through that list of colored cells.

Note that all cells in the table are colored green except the cell whose text is "D" because the program cannot distinguish a cell containing the name of a cell containing the note of a cell containing the identification.

What you need to do is add information to a certain group of cells so that this information can be detected and help you by separating cells that should be colored from cells that should not be colored.

That information can be checked in the item itself HTML through property class which is nothing more than a list of classes of an element, separated by spaces. Classes allow the CSS and to the Javascript select and access specific elements via class selectors or functions such as the DOM method document.getElementsByClassName().

Take the example:

//Seleciona apenas os elementos <td> do documento cujo a classe é nota.
let tds = document.querySelectorAll("td[class='nota']");

//Agora itera apenas pelos elementos cujo a classe é nota.
tds.forEach((td) => {
  td.style.backgroundColor = (td.innerText == 'D') ? "red" : "green";
});
<html>
<table>
  <tr>
    <th>Codigo</th>
    <th>Nome</th>
    <th>Situação</th>
  </tr>
  <tr>
    <td>0001</td>
    <td>Felipe</td>
    <td class="nota">A</td><!--Atribui a classe nota a essa célula-->
  </tr>
  <tr>
    <td>0002</td>
    <td>Carlos</td>
    <td class="nota">D</td><!--Atribui a classe nota a essa célula-->
  </tr>
  <tr>
    <td>0003</td>
    <td>Amanada</td>
    <td class="nota">A</td><!--Atribui a classe nota a essa célula-->
  </tr>
</table>

</html>

  • This way it would work, but I can’t assign a class because I’m setting up the table directly with PHP taking the database data through a select. Even so thank you, the first answer fits exactly with my scenario.

0

Hello see if adding a class you can do, follow an example:

function myFunction() {
   var element = document.getElementById('td');
   element.classList.add("classeComFundoVermelho");
}

  • This way it would work, but I can’t assign a class because I’m setting up the table directly with PHP taking the database data through a select. Even so thank you, the first answer fits exactly with my scenario.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.