I'm trying to print the x on the screen but it gives error in the data table

Navigation
1

I'm trying to make a table put an x in the location of the file. The code in the table worked, but I want to put it in a jquery datatable but he is not accepting it takes the confg of the plugin or error the table code is this 

<!DOCTYPE html>
<html>
<head>
	<title></title>

	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
    <link rel="stylesheet" type="text/css" href="estilo.css">
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script></head><body><divclass="espaco">
		<div class="row">

            
                <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>
            <table id="example" class="display  table-overflow" >
                <thead>
                    <tr>
                        <th>Dia</th>
                        <th>Cliente</th>
                        <th>Captador</th>
                        

                        <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>

                        
                        <td>23</td>
                        <td>Joao</td>
                        <td>CAptador01</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                  s      <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>x</td>
                        <td></td>
                        <td></td>
                        
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
                
                
                
                
            </table>
        </div>
        
    </div>


    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script><scripttype="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script><script>$(document).ready(function(){$('#example').DataTable({"scrollX": true
        } );
    } );        
</script>

<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.
    });

</script>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script><scripttype="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script><script>$(document).ready(function(){$('#example').DataTable({"scrollX": true
        } );
    } );        
</script>


</body>
</html>
    
asked by anonymous 08.06.2018 / 19:37

1 answer

1

Before I would like to say that you are doing a jQuery mix with pure unnecessary JavaScript. Just use jQuery in this case, because in addition to drastically reducing the code, it is much easier and more efficient to write, as well as being appropriate since you are using a jQuery (Datatables) plugin.

First you must load the jQuery lib before all the libs that use it. In your code you are calling Datatables well before.

Another thing is the absence of the .tabela-horario class you use in the script to make the for loop. This class must be in the first% of the% of the table, from where you will get the values of tr s: 

<table id="example" class="display table-overflow" >
    <thead>
        <tr class="tabela-horario">
           ...

In the script you can use the th method only on .each s that has the th attribute, because Datatables inserts the same amount of aria-label s existing, doubling the amount.

  

Another thing is that by adding rows of the form you are doing with th , they will not inherit the   table formatting, because Datatables has its own rendering   at the time the plugin is started.

What you should do is to use the .append and row.add API methods: 

tabela.row.add( array ).draw( false );

Where in .draw , each array value is the cell content, and the array must have the same number of items equal to the number of columns in the table. In the case, the table has 27 columns, so the array should have 27 items.

Another thing is the order of the rows: the Datatables by default list in ascending order, so the value of the first column of the row should always be greater than that of the previous row. For this I used the code: 

var linha = parseInt($("#filhos tr:last td").first().text())+1;

The variable array will increment the value so that the new lines always last.

Now let's see the code working: 

$(document).ready(function() {
   $('#example').DataTable( {
      "scrollX": true
   } );
} );

$('#inputGroupSelect01').change(function () {
  var valor = $(this).val();
  var ths = $("th[aria-label]", '.tabela-horario');
  var linha = parseInt($("#filhos tr:last td").first().text())+1;
  var colunas = [linha]; // insere o primeiro índice na array

  ths.each(function(i){
     if(i != 0){ // ignorar o primeiro índice da array
        colunas.push($(this).attr('horario') == valor ? "x" : "");
     }
  });

   var t = $('#example').DataTable();
   t.row.add( colunas ).draw( false );
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script><divclass="espaco">
   <div class="row">

         
             <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>
         <table id="example" class="display table-overflow" >
             <thead>
                 <tr class="tabela-horario">
                     <th>Dia</th>
                     <th>Cliente</th>
                     <th>Captador</th>
                     

                     <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>

                     
                     <td>23</td>
                     <td>Joao</td>
                     <td>CAptador01</td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td>x</td>
                     <td></td>
                     <td></td>
                     
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                 </tr>
             </tbody>
             
             
             
             
         </table>
     </div>
     
 </div>
  

Note: The table does not have the column with the linha time it has in 8:00 .

    
08.06.2018 / 21:22
Action with scroll in javascript Check if a string is composed of digits