Is there any way to edit the elements of the table created with a JavaScript
function directly in the table, with a double click?
I created a function that uses three inputs to print their values in the table, as I am new to the area I still do not know much about the language.
It may be easier for a medium to send the values of tr
to the inputs
with a dblevent.
function adicionarItem() {
var refNome = document.querySelector("#nome").value;
var refCpf = document.querySelector("#cpf").value;
var refRg = document.querySelector("#rg").value;
var usuarioTr = document.createElement("tr");
usuarioTr.className = "user";
var selec = document.createElement('td');
selec.className = 'usr';
var input = document.createElement('input');
input.type = 'checkbox';
input.className = 'check';
selec.appendChild(input);
var nomeTd = document.createElement("td");
var cpfTd = document.createElement("td");
var rgTd = document.createElement("td");
nomeTd.textContent = refNome;
cpfTd.textContent = refCpf;
rgTd.textContent = refRg;
usuarioTr.appendChild(selec);
usuarioTr.appendChild(nomeTd);
usuarioTr.appendChild(cpfTd);
usuarioTr.appendChild(rgTd);
var tabela = document.querySelector("#tabela");
tabela.appendChild(usuarioTr);
}
function removerItem() {
ckList = document.querySelectorAll("input[type=checkbox]");
ckList.forEach(function(el, index) {
if (ckList[index].checked) el.parentElement.parentElement.remove();
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Teste01</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="./main.js"></script>
<section>
<form>
<div>
<label for="nome">Nome:</label>
<input id="nome" name="nome" type="text" placeholder="Digite seu nome aqui" autofocus/>
</div>
<div>
<label for="cpf">CPF:</label>
<input id="cpf" name="cpf" type="number" placeholder="Digite seu CPF" />
</div>
<div>
<label for="rg">RG:</label>
<input id="rg" name="rg" type="number" placeholder="Digite seu RG" />
</div>
<button id="adicionarBotao" onclick="adicionarItem()" type="button">Adicionar</button>
<button id="editarBotao" onclick="" type="button">Editar</button>
<button id="excluirBotao" onclick="removerItem()" type="button">Excluir</button>
</form>
</section>
<table>
<thead>
<tr>
<th>Selecionar</th>
<th>Nome</th>
<th>CPF</th>
<th>RG</th>
</tr>
</thead>
<tbody id="tabela">
</tbody>
</table>
</body>
</html>