That paints the cell when it printa x

Asked

Viewed 54 times

1

I’m trying to get him to paint the cell table when he prints 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>
    <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>

javascript table

  • You want to paint the cell marked with X is this?

  • even to mark the cell marked with the x was to be doing it but do not know why not

1 answer

3


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

switch(valor.toLowerCase()){

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

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

and the attribution of the event:

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>

  • po guy vlw thank you very much saved my life only one question as I can do this printout and stay on screen even if updating the page it will stay on screen

  • one thing I also noticed is that when Voce plays the x it does not paint Voce has to go there and put again pq it happens

  • 1

    @Brunoalbuquerque, about starting the cell with x already painted you can do when creating the cell item += '<td class="tdnew" style="background-color: red;">X</td>';, already on how to keep this up when refreshing the page is a broader subject, if you use some backend language like php, you can use to keep this in the database, if you don’t use any backend language, you can keep this in localstorage, if you can search these items, they are very interesting.

  • po dude vlw same

Browser other questions tagged javascript table

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