Changing the color of a cell in a table depending on the status [duplicate]

Question

Changing the color of a cell in a table depending on the status [duplicate]

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I wanted to change the color of a table cell depending on the value entered by the user. For example A = green, B = blue, C = black, I was able to make the code change the color of the table, but I can not do the user changes the color.

[data-color="1"],
[data-color="2"] {
  background-color: gray;
}
[data-color="3"],
[data-color="4"] {
  background-color: yellow;
}
[data-color="5"] {
  background-color: red;
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Trabalhando com seletores de atributos</title>

  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="color.css">
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Nome</th>
        <th>Idade</th>
      </tr>
    </thead>

    <tbody>
      <tr data-color="1">
        <td>Marco Bruno</td>
        <td>1</td>
      </tr>
      <tr data-color="3">
        <td>Antonio Silva</td>
        <td>2</td>
      </tr>
      <tr data-color="3">
        <td>Ricardo Souza</td>
        <td>3</td>
      </tr>
      <tr data-color="4">
        <td>Paulo Cesar</td>
        <td>4</td>
      </tr>
      <tr data-color="5">
        <td>Cesar Oliveira</td>
        <td>5</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

javascript tabela

asked by anonymous 04.06.2018 / 13:49

2 answers

0

I was able to implement in the table now I do not know how I will include this in a for to fall in a schedule with the correct color

        var cells = document.querySelectorAll("table tr td");

for(var x=0; x<cells.length; x++){
   cells[x].onmouseover = cells[x].onblur = function(e){
      this.setAttribute("contenteditable", e.type == "mouseover" ? true : false);

      if(e.type == "blur"){
         var valor = this.textContent;
         
         switch(valor){
            
            case "x":
               this.style.backgroundColor = "red";
               break;

            case "a":
               this.style.backgroundColor = "green";
               break;

            case "c":
               this.style.backgroundColor = "yellow";
               break;
            case "d":
                this.style.backgroundColor="orange";
            
         }

        ; // altera a cor do texto para branco

      }

      
   }

}

 {
    font-family:Consolas
}

.tabelaEditavel {
    border:solid 1px;
    width:10%
}

.tabelaEditavel td {
    border:solid 1px;
}

.tabelaEditavel .celulaEmEdicao {
    padding: 0;
}

.tabelaEditavel .celulaEmEdicao input[type=number]{
    width:4%;
    border:0;
    background-color:rgb(255,253,210);  
}

.colorido {
  background: red;
}
[data-color="1"],
[data-color="2"] {
  background-color: gray;
}
[data-color="3"],
[data-color="4"] {
  background-color: yellow;
}
[data-color="5"] {
  background-color: red;
}

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Navegador em tabela HTML</title>
    <link rel="stylesheet" type="text/css" href="estilo.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>




<tr id="idTr">
<td id="IDbatchID">010203</td>
<td id="IDproduct">Leite</td>
<td id="IDbatchSize">30000</td>
<td id="IDpriority">1</td>
<td id="IDstartReq">03-31-2017 08:00:00</td>
<td id="IDstatus">In Process</td>
</tr>
</table>
    <table class="tabelaEditavel">
        <thead>
            <tr id="">
                <th>08:30</th>
                <th>09:00</th>
                <th>09:30</th>
                <th>10:00</th>
                <th>10:30</th>
                <th>11:00</th>
                <th>11:30</th>
                <th>12:00</th>
                <th>12:30</th>
                <th>13:00</th>
                <th>13:30</th>
                <th>14:00</th>
                <th>15:00</th>
                <th>15:30</th>
                <th>16:00</th>
                <th>16:30</th>
                <th>17:00</th>
                <th>17:30</th>
                <th>18:00</th>
                <th>18:30</th>
                <th>19:00</th>
                <th>19:30</th>
                <th>20:00</th>
            </tr>
        </thead>
        <tbody>
            <tr >
               <td id="idTd"value="a">b</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td id="idTd">a</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>
               <td>1</td>         </tr>
               <tr>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>
                   <td>1</td>/tr>
                   <tr>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                     <td>.</td>
                 </tr>
                 <tr>
                  <td id="celula">1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td>
                  <td>1</td> </tr>
              </tbody>
          </table>

          <table>







      </body>
      </html>

04.06.2018 / 22:54

Parameters in the URL using / You are not creating with "persist"

score 1 · Accepted Answer

You can do this by turning the td editable when hovering. After typing a value in td , taking the focus , the script will apply the colors as it was typed (A, B or C), remembering that it is case sensitive in>, that is, if you type "a" is not the same as typing "A".

See:

// pego todas as segundas células de cada linha
var cells = document.querySelectorAll("table tr td:nth-child(2)");

for(var x=0; x<cells.length; x++){
   cells[x].onmouseover = cells[x].onblur = function(e){
      this.setAttribute("contenteditable", e.type == "mouseover" ? true : false);

      if(e.type == "blur"){
         var valor = this.textContent;
         
         switch(valor){
            
            case "A":
               this.style.backgroundColor = "green";
               break;

            case "B":
               this.style.backgroundColor = "blue";
               break;

            case "C":
               this.style.backgroundColor = "black";
               break;
            
         }

         this.style.color = "white"; // altera a cor do texto para branco

      }

      
   }
}

[data-color="1"],
[data-color="2"] {
  background-color: gray;
}
[data-color="3"],
[data-color="4"] {
  background-color: yellow;
}
[data-color="5"] {
  background-color: red;
}

<table>
 <thead>
   <tr>
     <th>Nome</th>
     <th>Idade</th>
   </tr>
 </thead>

 <tbody>
   <tr data-color="1">
     <td>Marco Bruno</td>
     <td>1</td>
   </tr>
   <tr data-color="3">
     <td>Antonio Silva</td>
     <td>2</td>
   </tr>
   <tr data-color="3">
     <td>Ricardo Souza</td>
     <td>3</td>
   </tr>
   <tr data-color="4">
     <td>Paulo Cesar</td>
     <td>4</td>
   </tr>
   <tr data-color="5">
     <td>Cesar Oliveira</td>
     <td>5</td>
   </tr>
 </tbody>
</table>