Edit table elements

Asked

Viewed 1,235 times

2

Is there any way to edit table elements created with a function JavaScript directly in the table, with a double click?

I created a function that uses three inputs to print in the table their respective values, as I am new in the area not yet know much about the language.

Maybe it’s easier to have a medium that sets the values of tr for 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>

javascript html5 css3

2 answers

0

I can’t believe jQuery is the best way out of this kind of thing. It seems to me that you are trying to give a certain "reactivity" to your application and in this case I advise you to leave for the Vue.js.

At this link you can find a simple example of what you are looking for.

0


Using javascript only, it is possible to do and edit in the yes cell, follow an example:

function saveNew() {
  var $tr = document.createElement('tr');
  
  $tr.appendChild(createCell('nome'));
  $tr.appendChild(createCell('cpf'));
  $tr.appendChild(createCell('rg'));
  
  $btExcluir = document.createElement('button');
  $btExcluir.innerHTML = 'Excluir';
  $btExcluir.addEventListener('click', remove);

  $tdActions = document.createElement('td');
  $tdActions.appendChild($btExcluir);

  $tr.appendChild($tdActions);
  
  document.getElementById('data').appendChild($tr);
}

function createCell(name) {
  var $td = document.createElement('td');
  $td.innerHTML = document.querySelector('[name="' + name + '"]').value;

  $td.addEventListener('click', function() {
    var $td = this;
    $input = document.createElement('input');
    $input.type = 'text';
    $input.value = this.innerHTML;
    $input.addEventListener('blur', function() {
      $td.innerHTML = this.value;
    });
    
    this.innerHTML = '';
    this.appendChild($input);
  });

  return $td;
}

function remove() {
  var $tr = this.parentNode.parentNode;
  $tr.parentNode.removeChild($tr);
}
<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>CPF</th>
      <th>RG</th>
      <th>Ações</th>
    </tr>
  </thead>
  <tbody id="data"></tbody>
  <tfoot>
    <tr>
      <td><input type="text" name="nome"></td>
      <td><input type="text" name="cpf"></td>
      <td><input type="text" name="rg"></td>
      <td><button onclick="saveNew()">Salvar</button></td>
    </tr>
  </tfoot>
</table>

Browser other questions tagged javascript html5 css3

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