Estou montando uma tabela HTML em PHP, por ser mais complexa.
Pego os dados em JavaScript com AngularJS, mando pro PHP e retorno pro JS. No JS pego a resposta do PHP e insiro o conteúdo com innerHTML dentro do tbody, porém, o conteúdo está sendo mudado ao inserir.
No console.log imprimi a resposta do PHP e está vindo certinha, só que ao adicionar, tem tags que estão fechando sem eu ter fechado.
Vou inserir uma parte do código da tabela.
Resposta do PHP impressa no console.log:
<tr>
<tr>
<td>
<form class="thumbnail foto-table" id="form-alteracao" enctype="multipart/form-data">
<img src="" />
</form>
</td>
<td>1</td>
<td>MODELO 01</td>
<td>1</td>
<td>50</td>
<td>50</td>
<td>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-default">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</div>
</td>
</tr>
Código depois de ser inserido:
>
</tr>
<tr>
<td>
<form class="thumbnail foto-table" id="form-alteracao" enctype="multipart/form-data">
<img src="">
</form>
</td>
<td>1</td>
<td>MODELO 01</td>
<td>1</td>
<td>50</td>
<td>50</td>
<td>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-default">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</div>
</td>
</tr>
Tem alguma forma diferente de inserir esse conteúdo HTML pelo JavaScript?
Isso está acontecendo pois você não está fechando corretamente os “tr”, ai o browser tenta corrigir e acaba bagunçando, coloque um no final do seu HTML pois parece estar faltando um.
O que eu postei foi só uma parte do código, pra não ficar extenso. Todas as tags abertas estão sendo fechadas, conferi uma por uma
Vou tentar resumir o código da tabela:
<tr>
<tr>
<td>
<form class="thumbnail foto-table" id="form-alteracao" enctype="multipart/form-data">
<img src="" />
</form>
</td>
<td>1</td>
<td>MODELO 01</td>
<td>1</td>
<td>50</td>
<td>50</td>
<td>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-default">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</div>
</td>
</tr>
<tr>
<table class="table-custom">
<thead class="table-custom">
<td></td>
<td class="table-grade table-custom">1</td>
</thead>
<tbody>
<tr>
<td class="row-table-grade text-center">
<img src="../../imagens/cores/16x16/azul.png">
</td>
<td class="table-grade row-table-grade" id="quant-item">
<input type="text" class="quantidade-grade text-center" id="1" value="1" name="1" readonly>
</input>
</td>
</tr>
</tbody>
</table>
</tr>
</tr>
Bom, o problema é que você está usando tr de forma errada, fora da estrutura da table e o browser desconsidera as tags tr, mesmo copiando o seu código e jogando diretamente em um arquivo HTML o erro acontece, não tem nada a ver com o innerHTML.
A tr serve para definir uma linha na table, você não vai conseguir colocar tr dentro de tr, o browser vai tentar corrigir e mudar a posição delas.
Mas a tr está dentro do tbody
<div class="table-responsive itens" ng-show="pedidos.length != 0">
<table id="table-itens-pedido" width="100%">
<thead>
<tr>
<th width="50px" class="thead-th-align text-center">Foto</th>
<th width="80px" class="text-center">Código</th>
<th width="50%">Modelo</th>
<th width="100px">Quantidade</th>
<th width="100px">Preço Unit.</th>
<th width="80px">Subtotal</th>
<th class="text-center" width="80px">#</th>
</tr>
</thead>
<tbody id="itens-pedido">
</tbody>
</table>
</div>
Eu o pego com document.getElementById("itens-pedido")
e adiciono o conteúdo dentro dele.