InnerHTML mudando conteúdo de tags

15 de maio de 2017 4 respostas

PauloAugusto 15 de maio de 2017

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?

4 Respostas

Thiago_Nascimento 15 de mai. de 2017

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.

PauloAugusto 16 de mai. de 2017

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>

Thiago_Nascimento 16 de mai. de 2017

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.

PauloAugusto 16 de mai. de 2017

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.

Criado 15 de maio de 2017

Ultima resposta 16 de mai. de 2017

Respostas 4

Participantes 2

4 Respostas

Topicos relacionados