1

Estou tentando fazer ele pintar a célula da tabela quando ele printa o x lá, mas não está dando certo.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <link rel="stylesheet" type="text/css" href="estilo.css" />
    <script src="main.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div class="">
        <div class="d-flex justify-content-center">
            <select class="custom-select" id="inputGroupSelect01" style="width: 500px;">
                <option selected>Choose...</option>
            <option value="08:00">08:00</option> 
            <option value="08:30">08:30</option> 
            <option value="09:00">09:00</option> 
            <option value="09:30">09:30</option> 
            <option value="10:00">10:00</option> 
            <option value="10:30">10:30</option> 
            <option value="11:00">11:00</option> 
            <option value="11:30">11:30</option> 
            <option value="12:00">12:00</option> 
            <option value="12:30">12:30</option> 
            <option value="13:00">13:00</option> 
            <option value="13:30">13:30</option> 
            <option value="14:00">14:00</option> 
            <option value="14:30">14:30</option> 
            <option value="15:00">15:00</option> 
            <option value="15:30">15:30</option> 
            <option value="16:00">16:00</option> 
            <option value="16:30">16:30</option> 
            <option value="17:00">17:00</option>
            <option value="17:30">17:30</option> 
            <option value="18:00">18:00</option> 
            <option value="18:30">18:30</option> 
            <option value="19:00">19:00</option> 
            <option value="19:30">19:30</option> 
            <option value="20:00">20:00</option> 
            </select>
        </div>
    </div>

    <table class="table tabelaEditavel" id="tabela">
        <thead>
            <tr class="tabela-horario">
                <th horario="08:00" scope="col">08:00</th> <!-- '<--' Note que eu to passando um atributo horario aqui  -->
                <th horario="08:30" scope="col">08:30</th>
                <th horario="09:00" scope="col">09:00</th>
                <th horario="09:30" scope="col">09:30</th>
                <th horario="10:00" scope="col">10:00</th>
                <th horario="10:30" scope="col">10:30</th>
                <th horario="11:00" scope="col">11:00</th>
                <th horario="11:30" scope="col">11:30</th>
                <th horario="12:00" scope="col">12:00</th>
                <th horario="12:30" scope="col">12:30</th>
                <th horario="13:00" scope="col">13:00</th>
                <th horario="13:30" scope="col">13:30</th>
                <th horario="14:00" scope="col">14:00</th>
                <th horario="14:30" scope="col">14:30</th>
                <th horario="15:00" scope="col">15:00</th>
                <th horario="15:30" scope="col">15:30</th>
                <th horario="16:00" scope="col">16:00</th>
                <th horario="16:30" scope="col">16:30</th>
                <th horario="17:00" scope="col">17:00</th>
                <th horario="17:30" scope="col">17:30</th>
                <th horario="18:00" scope="col">18:00</th>
                <th horario="15:30" scope="col">18:30</th>
                <th horario="19:00" scope="col">19:00</th>
                <th horario="19:30" scope="col">19:30</th>
                <th horario="20:00" scope="col">20:00</th>
            </tr>
        </thead>
        <tbody id="filhos">
            <tr>

            </tr>
        </tbody>
    </table>

</body>
<script>
    $('#inputGroupSelect01').change(function (value) {
        var item = ' <tr> '; // inicio a string que tem o meu html
        for (var x = 0; x <  $('.tabela-horario').children().length; x++) { // Aqui eu faço um for each, nos th da tabela
            if ($('.tabela-horario').children()[x].getAttribute('horario') == this.value) { // aqui eu verifico se o value 
                item += '<td>X</td>';                                                        //do meu select é igual ao meu atributo horario
            }
            else {
                item += '<td></td>';
            }
        }
        item += '</tr>';
        $('#filhos').append(item); //adiciono ele na tabela basicao.
    });


        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

      }

      
   }
}
</script>
</html>

2
  • Vc quer pintar a célula marcada com o X é isto?
    – LeAndrade
    Commented 7/06/2018 às 15:07
  • issmo mesmo marcar a celula marcada com o x era pra tar fazendo isto mas nao sei o pq nao ta Commented 7/06/2018 às 15:50

1 Resposta 1

3

Bruno, o principal problema é que estava tentando setar os eventos antes das células existirem, então no código a seguir: quando as células são criadas os eventos são setados as novas células. Também adicionei um toLowerCase no teste do switch:

switch(valor.toLowerCase()){

Adicionei o evento também ao mouseleave, mas dependendo do seu caso, é só remover do if:

  if(e.type == "blur" || e.type == "mouseleave"){

e da atribuição do evento:

cells[x].onmouseleave = ev;

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <link rel="stylesheet" type="text/css" href="estilo.css" />
    <script src="main.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div class="">
        <div class="d-flex justify-content-center">
            <select class="custom-select" id="inputGroupSelect01" style="width: 500px;">
                <option selected>Choose...</option>
            <option value="08:00">08:00</option> 
            <option value="08:30">08:30</option> 
            <option value="09:00">09:00</option> 
            <option value="09:30">09:30</option> 
            <option value="10:00">10:00</option> 
            <option value="10:30">10:30</option> 
            <option value="11:00">11:00</option> 
            <option value="11:30">11:30</option> 
            <option value="12:00">12:00</option> 
            <option value="12:30">12:30</option> 
            <option value="13:00">13:00</option> 
            <option value="13:30">13:30</option> 
            <option value="14:00">14:00</option> 
            <option value="14:30">14:30</option> 
            <option value="15:00">15:00</option> 
            <option value="15:30">15:30</option> 
            <option value="16:00">16:00</option> 
            <option value="16:30">16:30</option> 
            <option value="17:00">17:00</option>
            <option value="17:30">17:30</option> 
            <option value="18:00">18:00</option> 
            <option value="18:30">18:30</option> 
            <option value="19:00">19:00</option> 
            <option value="19:30">19:30</option> 
            <option value="20:00">20:00</option> 
            </select>
        </div>
    </div>

    <table class="table tabelaEditavel" id="tabela">
        <thead>
            <tr class="tabela-horario">
                <th horario="08:00" scope="col">08:00</th> <!-- '<--' Note que eu to passando um atributo horario aqui  -->
                <th horario="08:30" scope="col">08:30</th>
                <th horario="09:00" scope="col">09:00</th>
                <th horario="09:30" scope="col">09:30</th>
                <th horario="10:00" scope="col">10:00</th>
                <th horario="10:30" scope="col">10:30</th>
                <th horario="11:00" scope="col">11:00</th>
                <th horario="11:30" scope="col">11:30</th>
                <th horario="12:00" scope="col">12:00</th>
                <th horario="12:30" scope="col">12:30</th>
                <th horario="13:00" scope="col">13:00</th>
                <th horario="13:30" scope="col">13:30</th>
                <th horario="14:00" scope="col">14:00</th>
                <th horario="14:30" scope="col">14:30</th>
                <th horario="15:00" scope="col">15:00</th>
                <th horario="15:30" scope="col">15:30</th>
                <th horario="16:00" scope="col">16:00</th>
                <th horario="16:30" scope="col">16:30</th>
                <th horario="17:00" scope="col">17:00</th>
                <th horario="17:30" scope="col">17:30</th>
                <th horario="18:00" scope="col">18:00</th>
                <th horario="15:30" scope="col">18:30</th>
                <th horario="19:00" scope="col">19:00</th>
                <th horario="19:30" scope="col">19:30</th>
                <th horario="20:00" scope="col">20:00</th>
            </tr>
        </thead>
        <tbody id="filhos">
            <tr>

            </tr>
        </tbody>
    </table>

</body>
<script>
    $('#inputGroupSelect01').change(function (value) {
        var item = ' <tr> '; // inicio a string que tem o meu html
        for (var x = 0; x <  $('.tabela-horario').children().length; x++) { // Aqui eu faço um for each, nos th da tabela
            if ($('.tabela-horario').children()[x].getAttribute('horario') == this.value) { // aqui eu verifico se o value 
                item += '<td class="tdnew">X</td>';                                                        //do meu select é igual ao meu atributo horario
            }
            else {
                item += '<td class="tdnew"></td>';
            }
        }
        item += '</tr>';
        $('#filhos').append(item); //adiciono ele na tabela basicao.
        atribuirEventos();
    });

function atribuirEventos() {
var cells = document.querySelectorAll("table tr td.tdnew");

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

      if(e.type == "blur" || e.type == "mouseleave"){
         var valor = this.textContent;
         
         switch(valor.toLowerCase()){
            
            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

      }

      
   }; 
   cells[x].onmouseover = ev; 
   cells[x].onblur = ev;
   cells[x].onmouseleave = ev;
   cells[x].classList.remove("tdnew");
}
}
</script>
</html>

4
  • po cara vlw muito obrigado salvou minha vida só uma questao como eu consigo fazer isso printar e ficar na tela mesmo se atualizar a pagina ele ficara na tela Commented 8/06/2018 às 11:22
  • uma coisa que reparei tb é que quando voce joga o x ele nao pinta voce tem que ir la e colocar denovo pq isso acontece Commented 8/06/2018 às 11:24
  • 1
    @BrunoAlbuquerque, sobre o iniciar a celula com x já pintada vc pode fazer quando cria a celula item += '<td class="tdnew" style="background-color: red;">X</td>';, já sobre como manter isso quando atualizar a página é um assunto mais amplo, se você usa alguma linguagem de backend como php, pode usar para manter isso no banco de dados, se não usa nenhuma linguagem de backend, pode manter isso no localstorage, se puder da uma pesquisada nestes itens, são bem interessantes. Commented 8/06/2018 às 12:14
  • po cara bacana vlw mesmo Commented 8/06/2018 às 12:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .