0

Olá, sou novo aqui. Gostaria de saber como fazer meus input's gerados por javascript herdar a formatação css que meu input html tem. Segue o código:

<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>
2
  • vc quer adicionar uma nova linha igual a primeira?
    – Sam
    Commented 6/05/2018 às 21:39
  • Isso, quero seguir a tabela.
    – user112387
    Commented 6/05/2018 às 21:43

2 Respostas 2

1

Para criar novas linhas no seu HTML, você pode utilizar insertRow e insertCell

No caso do seu código, ficaria:

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>

6
  • Victor Jordan não deu certo, mesmo assim obrigado. Não teria como esses novos inputs seguir minha tabela?
    – user112387
    Commented 6/05/2018 às 21:37
  • Deu certo, mas como eu faço para cada input ficar a baixo do outro?
    – user112387
    Commented 6/05/2018 às 21:40
  • Acho que a maneira mais simples de você fazer isso seria fazer o append em uma div e definir que esta div tera o estilo display: block. Com isto, esta sua div vai ocupar uma linha inteira! Estou fazendo um CodePen aqui para te exemplificar Commented 6/05/2018 às 21:50
  • Certo, obrigado.
    – user112387
    Commented 6/05/2018 às 21:53
  • Acho que o que você quer é isso aqui, não é? CodePen Commented 6/05/2018 às 22:20
1

O ideal é clonar a tr e adicionar na tabela, evitando esse monte de divs desnecessários e que ao meu ver fere a semântica da tabela, adicionando divs entre as linhas.

Pode fazer desta forma:

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>

4
  • Deu certo!Muito bom, mas agora como faço pra coletar os dados de cada input?
    – user112387
    Commented 7/05/2018 às 0:44
  • pelo name vc consegue.
    – Sam
    Commented 7/05/2018 às 0:46
  • Se vc for enviar pelo form, o backend vc pega pela array de cada input... se quiser pegar pelo JavaScript, pelo name é fácil tb
    – Sam
    Commented 7/05/2018 às 0:50
  • Quero pegar pelo FORM backend, mas não estou conseguindo.
    – user112387
    Commented 7/05/2018 às 16:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .