Changing the color of a table cell depending on the status

Asked

Viewed 1,230 times

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 managed to get the code to change the color of the table, but I’m not getting the user to change 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 table
  • 5

    Could you review your text and please use scores? It’s virtually impossible to understand what you did and what you want to do.

  • 2

    Where the user will enter the value?

  • in the field where age is

  • The ages will be A, B or C?

  • not the age was only to exemplify the idea and by letters referring to the same color

2 answers

1


You can do it this way, transforming the td editable when passing the mouse. After typing a value in td, by taking out the phocus, the script will apply the colors according to what was typed (A, B or C), remembering that it is case sensitive, that is, if you type "a" is not the same as typing "a".

Behold:

// 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>

  • our vlw face by the help even only one doubt for me to take a form information and add in the table at the time she add the table will work normally with this code and to forward to the data bank she forwards as with the color or with the letter

  • type : Mark letter A he plays within the right field and will return green

  • I’ll check here...

  • because my intense is doing the same in this post here https://answall.com/questions/304274/alterando-o-campo-da-tabela?noredirect=1#comment617670_304274

  • Then you’ll need to use form to send to the bank

  • also the form would be to send the day the name and the time that scheduled this table would have two more fields that of the day and who scheduled and those fields of times there when the person typed the name the day and the time would appear on the screen in the field of the expected time q typed with the color of the status she placed there and dps sent to the bank . I’m trying to use requisi_ POST by ajax but not working very well

Show 1 more comment

0

I managed to implement in the table now I do not know how I will include it 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>
    <script src="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>

Browser other questions tagged javascript table

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