Changing the table field

Asked

Viewed 40 times

0

I have this table which I made as a test where I would like when the user schedules himself a time in a possible it can come with a letter and put in place of the one and changes the color of the cell type A = green B = black C= blue but I’m not getting the table field to 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>

javascript table

  • I forgot to delete that the best example and this basically the idea is to have a table of time where Voce will mark in the cell of the corresponding schedule and it changes the color

1 answer

0

From what I understand of your question, you would like the color to be changed when the user type 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 to the editable fields.

  • That’s what I’ve been able to do so far

  • I suggest to start building the algorithm in javascript so that it is possible to accomplish what you want.

Browser other questions tagged javascript table

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