Changing the table field

Navigation
0

I have this table that I did as a test where I would like that when the user schedules a schedule in a possisao he could come with a letter and put in the place of the one and the color of the cell type A = green B = black C = blue but I'm not able to make the table field change and change the color according to the letter 

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


 {
    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;
}
<!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="css/estilotabela.css">
</head>
<body>
  <table>
    <thead>
  
    <table class="tabelaEditavel">
        <thead>
            <tr id="">
              <th>Dia</th>
        <th>Cliente</th>
        <th>Colaborador</th>
                <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>1</td>
               <td>Silvio </td>
               <td>Resende</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>
               <td>1</td>

               </tr>
               <tr>
                   <td id="dia">2</td>
                   <td>Jose </td>
                   <td>Resende</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>
                   <td>1</td>
 
                 </tr>
                   <tr>
                     <td>20</td>
                     <td>Lucas</td>
                     <td>Almeida</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>
                   <td>1</td>
 
                 </tr>
                 
              </tbody>
          </table>
</body>
</html>
    
asked by anonymous 04.06.2018 / 17:02

1 answer

0

As I understood your question, you would like the color to change when the user types a certain letter, but you only have the html and css files, I believe that to do what you want it will be necessary to use javascript by adding an eventListener editable fields.

    
04.06.2018 / 19:15
Problem implementing Angular editing Publishing in WildFly without the war