How to create new element from input form?

Asked

Viewed 44 times

1

I managed to create a creating a new element from the id of the name, but I also want to add the value and date input elements, as I do?

I tried to copy like I did with the name: var textoValor = document.getElementById('novoValor')

tr.textContent = textoValor.value;

I would also like to know how to reset the table

var novoNome = document.getElementById('novoNome');
var novoValor = document.getElementById('novoValor');
var novaData = document.getElementById('novaData');

btnNovoCliente = document.getElementById('btnNovoCliente');

var tbody = document.getElementsByTagName("tbody")[0];

function adc() {
    document.getElementById("btnNovoCliente").addEventListener("click", function(){
        var cliente = document.getElementById('tbody');
        var textoNome = document.getElementById('novoNome');
        var tr = document.createElement('tr');

        tr.textContent = textoNome.value;

        cliente.appendChild(tr);

    });

}

window.addEventListener("load", adc);
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: monospace;
    font-size: 16px;
    background-color: rgba(10, 5, 9, 0.233);
}

body {
    width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    font-family: monospace;
}

.left {
    background-color: gray;
    width: 350px;
    height: 270px;
    padding: 15px 30px;
    margin: 30px 30px;
}

.left form .formulario input {
    width: 275px;
    height: 30px;
    margin: 6px;
    padding: 10px;
}

.left form .btn {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    margin-left: -5px;
}

.left form .btn input {
    margin: 10px;
    width: 80px;
    height: 30px;
}

#btnResetar {
    background-color: rgb(187, 111, 111);
    font-weight: bolder;
    color: white;
}

.right {
    display: flex;
    flex-direction: column;
    width: 1440px;
    height: 900px;
}

.right table {
    border: 1px solid white;
    margin-left: 60px;
}
.right table thead tr th {
    border: 1px solid white;
    outline: solid white;
}
.right table thead tr th {
    margin-right: 100px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyClients</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="left">
            <form action="#">
                <div class="formulario">
                    <div class="nome">
                        <label for="lNome">Nome:</label>
                    </div>
                    <div class="novoNome">
                        <input type="text" id="novoNome">
                    </div>

                    <div class="valor">
                        <label for="lValor">Valor:</label>
                    </div>
                    <div class="novoValor">
                        <input type="text" id="novoValor">
                    </div>

                    <div class="data">
                        <label for="lData">Data:</label>
                    </div>
                    <div class="novaData">
                        <input type="text" id="novaData">
                    </div>
                </div>
                <div class="btn">
                    <input type="button" id=btnNovoCliente value="Criar">
                    <input type="button" id=btnNovoCancelar value="Cancelar">
                    <input type="button" id=btnResetar value="Resetar">
                </div>
            </form>
        </div>
        <div class="right">
            <table>
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Valor</th>
                        <th>Data</th>
                    </tr>
                </thead>
                <tbody id="tbody">

                </tbody>
            </table>
        </div>
    </div>

</body>

</html>

javascript table forms

1 answer

2

I made use of the HTMLTableRowElement.insertCell() to insert new cells into your table..

incidentally, it is worth taking a look at the documentation Htmltablerowelement. I necessarily had to make some changes to your code and some corrections in your to work accordingly. However from what I understand it is that you want to:

  1. Add the respective values in the <table>
  2. Clear the pre-added values in the form
  3. Reset the respective values of the <table>

Therefore, suggest that does not fail to see How to create a Minimum, Complete and Verifiable example in order to prepare a good and clear question!

Follow the code below:

var nome = document.querySelector("#novoNome");
var valor = document.querySelector("#novoValor");
var data = document.querySelector("#novaData");

document.querySelector("#btnNovoCliente").addEventListener("click", function() {
  addRow(nome, valor, data); // adiciona o valor na tabela
});

document.querySelector("#btnResetar").addEventListener("click", function() {
   resetRows(); // limpa todas as linhas da tabela
});

document.querySelector("#btnNovoCancelar").addEventListener("click", function() {
   document.querySelector("#frmMain").reset(); // limpa todos os inputs do formulário
});

function addRow(nome, valor, data) {
  let table = document.querySelector("table");
  let row = table.insertRow(-1); // será adicionado na última linha
  var nomeCell = row.insertCell(0); // o index "0" refere-se a coluna "Nome"
  var valorCell = row.insertCell(1); // o index "1" refere-se a coluna "Valor"
  var dataCell = row.insertCell(2); // o index "2" refere-se a coluna "Data"
  
  nomeCell.innerHTML = nome.value;
  valorCell.innerHTML = valor.value;
  dataCell.innerHTML = data.value;
}

function resetRows() {
  var table = document.querySelector("table"); // obtêm o elemento table
  var rowCount = table.rows.length; // faz a contagem total linhas na table
  for (var x = rowCount-1; x > 0; x--) {
     table.deleteRow(x); // deleta linha por linha
  }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: monospace;
    font-size: 16px;
    background-color: rgba(10, 5, 9, 0.233);
}

body {
    width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    font-family: monospace;
}

.left {
    background-color: gray;
    width: 350px;
    height: 270px;
    padding: 15px 30px;
    margin: 30px 30px;
}

.left form .formulario input {
    width: 275px;
    height: 30px;
    margin: 6px;
    padding: 10px;
}

.left form .btn {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    margin-left: -5px;
}

.left form .btn input {
    margin: 10px;
    width: 80px;
    height: 30px;
}

#btnResetar {
    background-color: rgb(187, 111, 111);
    font-weight: bolder;
    color: white;
}

.right {
    display: flex;
    flex-direction: column;
    width: 1440px;
    height: 900px;
}

.right table {
    border: 1px solid white;
    margin-left: 60px;
}
.right table thead tr th {
    border: 1px solid white;
    outline: solid white;
}
.right table thead tr th {
    margin-right: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyClients</title>
</head>
<body>
    <div class="container">
        <div class="left">
            <form action="#" id="frmMain">
                <div class="formulario">
                    <div class="nome">
                        <label for="lNome">Nome:</label>
                    </div>
                    <div class="novoNome">
                        <input type="text" id="novoNome">
                    </div>

                    <div class="valor">
                        <label for="lValor">Valor:</label>
                    </div>
                    <div class="novoValor">
                        <input type="text" id="novoValor">
                    </div>

                    <div class="data">
                        <label for="lData">Data:</label>
                    </div>
                    <div class="novaData">
                        <input type="text" id="novaData">
                    </div>
                </div>
                <div class="btn">
                    <input type="button" id="btnNovoCliente" value="Criar">
                    <input type="button" id="btnNovoCancelar" value="Cancelar">
                    <input type="button" id="btnResetar" value="Resetar">
                </div>
            </form>
        </div>
        <div class="right">
            <table>
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Valor</th>
                        <th>Data</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

Browser other questions tagged javascript table forms

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