Table header thead does not align with lines after append

Asked

Viewed 118 times

0

I have a problem with the code,

I need to align Thead tags on my table that receives a json of all the data, the data is coming and the header is there, but both are not aligned, I need a 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>")


    });

    });

});
jquery html css html5 table

  • It’s easier if you copy the final html and tell what you want to change in it. We don’t have the getJSON link to test.

  • Friend advice, use jquery-tmpl to bind with json data, this lib does not receive updates for a long time but I always used it and never had problems. https://github.com/BorisMoore/jquery-tmpl

  • @loops As I said with the apend the data comes normally from the web service but the header of the thead the <th> are not aligned with this apend

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’d like to give you some advice, in your each loop rather than putting the append in all the loop iterations you can put out 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);

  • Vish that slack my kkkkk was this very ours and me breaking his head hard, thanks bro !

  • tmj, anything is just beeping. haha

Browser other questions tagged jquery html css html5 table

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