Add input with Javascript

Asked

Viewed 4,800 times

0

Hello, I’m new here. I’d like to know how to make my javascript-generated input inherit the css formatting my html input has. Follow the code:

<html>
<head>
    <title>Pedidos</title>
    <style>
    </style>
</head>
<body>

    <form method="POST">
            Receita
            <input type="text" name="receita" placeholder="Ex: Pão de queijo">



        <table border=1>
        <tr><td colspan="6" style="text-align: center"><label>Pedidos:</label></td></tr>
        <tr>

        <div id="codProduto">
            <td>Cód. Produto:</td> 
            <td><input type="text" name="codProduto[]" placeholder="Cód. Produto"></td>
        </div>




        <div id="quantidade">
            <td><label>Quantidade:</label></td>
            <td><input type="text" name="razao[]" placeholder="Quantidade"></td>
        </div>




        <div id="desconto">
            <td><label>Desconto:</label></td>
            <td><input type="text" name="desconto[]" placeholder="Desconto"></td>
        </div>
            </tr>
        </table>

  <button type="button" id="adicionar">Adicionar</button>
  <button type="submit">Cadastrar</button>

    </form> 

    <script>
    const adicionar = document.getElementById("adicionar");


    const codProduto = document.getElementById("codProduto");
    const quantidade = document.getElementById("quantidade");
    const desconto = document.getElementById("desconto");

    adicionar.addEventListener("click", function (event) {
    let campo = document.createElement("input");
    let campoQuantidade = document.createElement("input");
    let campoDesconto = document.createElement("input");

    campo.name = "codProduto[]";
    campo.name = "razao[]";
    campo.placeholder = "CodProduto";
    campoQuantidade.placeholder = "Quantidade";
    campoDesconto.placeholder = "Desconto";
    codProduto.appendChild(campo);
    quantidade.appendChild(campoQuantidade);
    desconto.appendChild(campoDesconto);

    });
    </script>





</body>
</html>
javascript css table

  • you want to add a new line equal to the first?

  • Yes, I want to follow the table.

2 answers

1


To create new lines in your HTML, you can use insertRow and insertCell

In the case of your code, it would be:

const adicionar = document.getElementById("adicionar");

adicionar.addEventListener("click", function (event) {

var table = document.getElementById("tabela");
var row = table.insertRow(2);

row.insertCell(0).innerHTML = "Cód. Produto:";
row.insertCell(1).innerHTML = `<input type="text" name="codProduto[]" placeholder="CodProduto"> `;
row.insertCell(2).innerHTML = "Quantidade";
row.insertCell(3).innerHTML = `<input type="text" name="razao[]" placeholder="Quantidade">`;
row.insertCell(4).innerHTML = "Desconto";
row.insertCell(5).innerHTML = `<input type="text" name="desconto[]" placeholder="Desconto">`;

});
<html>

<head>
    <title>Pedidos</title>
</head>

<body>

    <form method="POST">
        Receita
        <input type="text" name="receita" placeholder="Ex: Pão de queijo">
        <table border=1 id="tabela">
            <tr>
                <td colspan="6" style="text-align: center">
                    <label>Pedidos:</label>
                </td>
            </tr>
            <tr>

                <td>Cód. Produto:</td>
                <td>
                    <input type="text" name="codProduto[]" placeholder="Cód. Produto">
                </td>
                <td>
                    <label>Quantidade:</label>
                </td>
                <td>
                    <input type="text" name="razao[]" placeholder="Quantidade">
                </td>
                <td>
                    <label>Desconto:</label>
                </td>
                <td>
                    <input type="text" name="desconto[]" placeholder="Desconto">
                </td>
            </tr>

        </table>

        <button type="button" id="adicionar">Adicionar</button>
        <button type="submit">Cadastrar</button>

    </form>

</body>

</html>

  • Victor Jordan didn’t work out, but thanks anyway. There would be no way these new inputs follow my table?

  • It worked, but how do I get every input down the other?

  • I think the simplest way for you to do that would be to make the append in a div and define that this div will have the style display: block. With this, your div will occupy an entire line! I am making a Codepen here to exemplify you

  • Okay, thank you.

  • I think what you want is this here, isn’t it? Codepen

  • That’s right. I get it now, thank you very much.

Show 1 more comment

1

The ideal is to clone the tr and add to the table, avoiding this lot of divunnecessary and that in my view hurts the semantics of the table, adding divs between the lines.

You can do it this way:

var tabela = document.body.querySelector("table tbody"); // seleciona o corpo da tabela
adicionar.addEventListener("click", function (event) {
   var clone = document.body.querySelectorAll("table tr")[1].cloneNode(true); // seleciona a segunda linha
   var els = clone.querySelectorAll("input"); // seleciona os inputs do clone

   for(var x=0; x<els.length; x++){
      els[x].value = ''; // limpa os campos do clone
   }

   tabela.appendChild(clone); // insere o conle na tabela
});
<form method="POST">
   Receita
   <input type="text" name="receita" placeholder="Ex: Pão de queijo">

   <table border=1>
   <tr><td colspan="6" style="text-align: center"><label>Pedidos:</label></td></tr>
   <tr>
   
   <td>Cód. Produto:</td> 
   <td><input type="text" name="codProduto[]" placeholder="Cód. Produto"></td>
   
   <td><label>Quantidade:</label></td>
   <td><input type="text" name="razao[]" placeholder="Quantidade"></td>
   
   <td><label>Desconto:</label></td>
   <td><input type="text" name="desconto[]" placeholder="Desconto"></td>
   </tr>
   </table>

   <button type="button" id="adicionar">Adicionar</button>
   <button type="submit">Cadastrar</button>
</form>

  • It worked! Very good, but now how do I collect the data of each input?

  • for name you can do it.

  • If you are going to send by form, the backend vc takes the array of each input... if you want to take by Javascript, by name is easy too

  • I want to take the backend FORM, but I’m not getting.

Browser other questions tagged javascript css table

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