Add input with JavaScript

Question

Add input with JavaScript

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Hello, I'm new here. I would like to know how to make my input generated by javascript inherit the css formatting that my html input has. Here is 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 tabela

asked by anonymous 06.05.2018 / 23:25

2 answers

0

The ideal thing is to clone the tr and add it to the table, avoiding this amount of unnecessary% s and which, in my opinion, hurts the semantics of the table, adding div s between the lines.

You can do this:

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>

07.05.2018 / 00:08

Check running subprocess Add column size (Mb) in php script that lists directory files

score 1 · Accepted Answer

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

In the case of your code, it would look like:

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>