What does the cell look like when it comes to printa x

Question

What does the cell look like when it comes to printa x

Navigation

#1 by (3 votes)

1

I'm trying to make it paint the table cell when it starts the x there, but it's not working.

<!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><divclass="">
        <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>

javascript tabela

asked by anonymous 07.06.2018 / 16:54

1 answer

How to use Distinct () or GroupBy () in a list that returns an anonymous type? How to select text that does not have a certain term in the middle?

score 3 · Accepted Answer

Bruno, the main problem is that I was trying to set the events before the cells exist, so in the following code: when the cells are created the events are set to the new cells. I also added a toLowerCase switch test:

switch(valor.toLowerCase()){

I also added the event to the mouseleave, but depending on your case, just remove it from if:

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

and event assignment:

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><divclass="">
        <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>