innerHTML on a TR of a Javascript table

Asked

Viewed 1,231 times

3

Hello I would like to generate a dynamic table in java script(only the tr and td) for this I am using innerHTML.

I make the following code:

objDiv1 = document.getElementById("tabela");

 bloco += "<tr><td>"+ Campo+"</td></tr>";

objDiv1.innerHTML = bloco;

You are generating the right html but you are playing above my table.

inserir a descrição da imagem aqui

If I take and give a console.log and paste in the place where it is this div will work:

inserir a descrição da imagem aqui

My html structure is like this:

<table class="table">
    <thead class=" text-primary">
    <th>
        Lote
    </th>
</thead>
<tbody>
<div id="tabela"> 
</div>
</tbody>

</table>

What am I doing wrong?

javascript html
  • 1

    I believe the most wrong thing is to put a div inside a table, this is really necessary?

  • @Guilhermecostamilam what would be the other way for me to pass an id and add the tr and td?

  • Adds direct to tbody or table itself

  • You should not use div inside table, and if you are going to use change its display to display:table-Cell, it may work although it is not the right one...

  • You can switch from innerHTML to outerHTML, it should work

1 answer

2


I created something fast and described each step as best as possible for you to understand, in my example I used a form... I did with pure javascript as well as your code, but I advise you to use jquery.

<html>
    <head>

    </head>
<body>

<script>
 function adicionar()
 {

    //Recupera as informações do campo dos formulários
    var codigo = document.getElementById('codigo').value;
    var nome   = document.getElementById('nome').value;

    //Encontra o elemento tabela
    tabela = document.getElementById("tabela");

    //Inclui uma linha no elemento tabela <tr></tr>
    //informei -1 para criar a linha no final da tabela
    var linha   = tabela.insertRow(-1);

    //Adiciona dua coluna na linha criada <td></td> <td></td>
    var coluna1 = linha.insertCell(0);
    var coluna2 = linha.insertCell(1);

    //Inclui o valor do campo do formulário em sua respectiva coluna
    coluna1.innerHTML = codigo;
    coluna2.innerHTML = nome;
 }
</script>

<form>

    <label for="codigo">Código</label>
    <input type="text" id="codigo">

    <label for="codigo">Nome</label>
    <input type="text" id="nome">

    <input type="button" onclick="return adicionar();" value="Cadastrar">
</form>

<table id="tabela" border="1">
    <tr>
        <td>Codigo</td>
        <td>Nome</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Raphael</td>
    </tr>
</table>


</body>

</html>

  • You can also only use innerHTML because it is simpler. But that’s basically it (although I don’t agree with the use of jQuery), if you want you can also put the id in a tbody within the table, to leave more organized

  • William because you do not agree with the use of jquery?

  • If you have an application that only enlarges a table, you don’t need to use jQuery, it would add unnecessary complexity and dependencies. If it’s not just that, it’s something more complex, probably also shouldn’t use, jQuery almost always leaves polluted and messy code, it’s great, for design

  • Just one question you don’t use any framework in your projects, either front or backend?

  • Use, when it is a static page, use jQuery, typed, velocity, ... In systems use Angularjs or Angular (but I am also willing, and want, to use Vue and React). In the backend also use, express, Phpmailer, my framework. I just find jQuery unnecessary for simple systems, not enough for more complex systems

Browser other questions tagged javascript html

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