Thead table header does not align with rows after append

Navigation
0

I have a problem with the code,

I need to align the Thead tags in my table which gets a json of all the data, the data is coming and the header is there, but both are not aligned, I need some help.

HTML Code Table: 

<div id="main-table-editaprod">

    <table id="tabela-produtos" class="table table-condensed table-hover table-striped">   
                <thead>                          
                      <tr>
                                          <th data-column-id="id_prod">Id</th>
                                          <th data-column-id="nome_prod_curto">Nome Curto</th>
                                          <th data-column-id="nome_prod_longo">Nome Longo</th>
                                          <th data-column-id="codigo_interno">Código Interno</th>
                                          <th data-column-id="cate">Categoria</th>
                                          <th data-column-id="preco">Preço</th>
                                          <th data-column-id="peso">Peso</th>
                                          <th data-column-id="largura_centimetro">Largura (cm)</th>
                                          <th data-column-id="altura_centimetro">Altura (cm)</th>
                                          <th data-column-id="quantidade_estoque">Quantidade Estoque</th>
                                          <th data-column-id="preco_promorcional">Preço Promorcional</th>
                                          <th data-column-id="foto_principal">Foto</th>
                                          <th data-column-id="visivel">Visivel</th>
                                          <th data-column-id="comprimento_centimetro">Comprimento (cm)</th>
                                        <th>&nbsp;</th>'
                        </tr>


              </thead>

          <tbody></tbody>

    </table>

jquery code: 

$.getJSON('http://localhost/projetohtml/admin/editarprod-todos',function(data){
    $.each(data, function(k, v){


    $('#tabela-produtos tbody').append("<tr><td id='id_prod' name='id_prod'>"+v.id_prod+"<td>"+
                                            "<td id='nome_prod_curto'>"+'<input type="text" name="nome_prod_curto" value='+v.nome_prod_curto+'></input>'+"<td>"+
                                            "<td id='nome_prod_longo'>"+'<input type="text" name="nome_prod_longo" value='+v.nome_prod_longo+'></input>'+"<td>"+
                                            "<td>"+'<input type="number" name="codigo_interno" class="table-editaprod-number2" value='+v.codigo_interno+'></input>'+"<td>"+
                                            "<td>"+'<input type="text" name="id_cat" class="table-editaprod-number" value='+v.id_cat+'></input>'+"<td>"+
                                            "<td>"+'<input type="number" name="preco" class="table-editaprod-number2" value='+v.preco+'></input>'+"<td>"+
                                            "<td>"+'<input type="number" name="peso" class="table-editaprod-number" value='+v.peso+'></input>'+"<td>"+
                                            "<td>"+'<input type="number" name="largura_centimetro" class="table-editaprod-number" value='+v.largura_centimetro+'></input>'+"<td>"+
                                            "<td>"+'<input type="number" name="altura_centimetro" class="table-editaprod-number" value='+v.altura_centimetro+'></input>'+"<td>"+
                                            "<td>"+'<input type="number" name="quantidade_estoque" class="table-editaprod-number" value='+v.quantidade_estoque+'></input>'+"<td>"+
                                            "<td>"+'<input type="number" name="preco_promorcional" class="table-editaprod-number2" value='+v.preco_promorcional+'></input>'+"<td>"+
                                            "<td>"+'<input type="file" name="foto_principal" value='+v.foto_principal+'></input>'+"<td>"+
                                            "<td>"+'<input type="text" name="visivel" value='+v.visivel+'></input>'+"<td>"+
                                            "<td>"+'<input type="text" name="comprimento_centimetro" class="table-editaprod-number" value='+v.comprimento_centimetro+'></input>'+"<td>"+
                      "<td>"+'<input type="button"  id="editarProdForm" value="Editar" name="editar"></input>'+"<td></tr>")


    });

    });

});
    
asked by anonymous 07.06.2017 / 16:50

1 answer

0

Hello, the problem is very simple ... You forgot to close the tags, for example: 

    // Essa linha: 
    <td id='id_prod' name='id_prod'>"+v.id_prod+"<td>"
    // Deve ficar assim:
    <td id='id_prod' name='id_prod'>"+v.id_prod+"</td>"

And I would like to give some advice in your loop each instead of putting the append in all iterations of the loop you can put off that works better and is more performative. 

 // Cria uma variável antes do each
 var html = "";
  $.each(data, function(k, v){ 
     // Eu nao adicionei os fechamentos do td ta bom, é só um exemplo.
     html += "<tr><td id='id_prod' name='id_prod'>"+v.id_prod+"<td>"+
                                            "<td id='nome_prod_curto'>"+'<input type="text" name="nome_prod_curto" value='+v.nome_prod_curto+'></input>'+"<td>"+
                                            "<td id='nome_prod_longo'>"+'<input type="text" name="nome_prod_longo" value='+v.nome_prod_longo+'></input>'+"<td>"+
                                            "<td>"+'<input type="number" name="codigo_interno" class="table-editaprod-number2" value='+v.codigo_interno+'></input>'+"<td>"+
                                            "<td>"+'<input type="text" name="id_cat" class="table-editaprod-number" value='+v.id_cat+'></input>'+"<td>"+
                                            "<td>"+'<input type="number" name="preco" class="table-editaprod-number2" value='+v.preco+'></input>'+"<td>"+
                                            "<td>"+'<input type="number" name="peso" class="table-editaprod-number" value='+v.peso+'></input>'+"<td>"+
                                            "<td>"+'<input type="number" name="largura_centimetro" class="table-editaprod-number" value='+v.largura_centimetro+'></input>'+"<td>"+
                                            "<td>"+'<input type="number" name="altura_centimetro" class="table-editaprod-number" value='+v.altura_centimetro+'></input>'+"<td>"+
                                            "<td>"+'<input type="number" name="quantidade_estoque" class="table-editaprod-number" value='+v.quantidade_estoque+'></input>'+"<td>"+
                                            "<td>"+'<input type="number" name="preco_promorcional" class="table-editaprod-number2" value='+v.preco_promorcional+'></input>'+"<td>"+
                                            "<td>"+'<input type="file" name="foto_principal" value='+v.foto_principal+'></input>'+"<td>"+
                                            "<td>"+'<input type="text" name="visivel" value='+v.visivel+'></input>'+"<td>"+
                                            "<td>"+'<input type="text" name="comprimento_centimetro" class="table-editaprod-number" value='+v.comprimento_centimetro+'></input>'+"<td>"+
                      "<td>"+'<input type="button"  id="editarProdForm" value="Editar" name="editar"></input>'+"<td></tr>"
  });

//Após o each vc adiciona o html na sua tabela
$('#tabela-produtos tbody').html(html);
    
07.06.2017 / 18:21
Wordpress - I changed the structure of permalinks and the posts were with error 500 (Internal Server Error) visibility: visible in div javascript