How to edit tables in JavaScript

Question

How to edit tables in JavaScript

Navigation

#1 by (1 votes)

0

I have a problem with a table that I made in html and javascript. The page is composed of 3 input fields that with the entered value is forwarded to the table below.

But I would like to be able to edit table items without having to delete and insert again.

Is there a way to send the values back to the input so that I can edit it?

PS:

I did the removal with a checkbox field. which takes the line and deletes, maybe to use this checkbox.

var itens = 0;

function adicionarItem() {
  itens += 1;

  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 = itens %2 == 0 ? "linha1": "linha2";
  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();
  });

  if (itens > 0) 
    itens -= 1;
}

<h1>Cadastro de usuário</h1>
<link rel="stylesheet" type="text/css" href="main.css" />
<section>
  <form>
    <div class="inputs"> 
      <div class="inside">
        <label for="nome">*Nome:</label>
        <input class="inp" id="nome" name="nome" type="text" placeholder="Digite seu nome aqui" autofocus/>
      </div>
      <div class="inside">
        <label for="cpf">*CPF:</label>
        <input class="inp" id="cpf" name="cpf" type="number" placeholder="Digite seu CPF" />
      </div>
      <div class="inside">
        <label for="rg">*RG:</label>
        <input class="inp" id="rg" name="rg" type="number" placeholder="Digite seu RG" />
      </div>
    </div>
    <div class="botoes">
      <button clas="bot" id="adicionarBotao" onclick="adicionarItem()" type="button">Adicionar</button>
      <button clas="bot" id="excluirBotao" onclick="removerItem()" type="button">Excluir</button>
    </div>
    </form>
</section>
<div class="tabelas">
  <table>
    <thead>
      <tr>
        <th>Selecionar</th>
        <th>Nome</th>
        <th>CPF</th>
        <th>RG</th>
      </tr>
    </thead>
    <tbody id="tabela">

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

javascript html5 css

asked by anonymous 24.08.2017 / 19:07

1 answer

What is the paper cutter for Bematech MP-2100 TH? How do I publish my application xamarin.forms

score 1 · Answer 1

Dear, I edited a code I already had here on the PC and adapted its need, with the values of Name, CPF and RG. Now just read to understand and change the style according to your need ...

<html>

<head>
    <script type="text/javascript" src="table_script.js"></script>
</head>

<style>
    td {
        text-align: center;
        border: 1px solid gray;
    }

    table{
        text-align: center;
    }
</style>

<body>
    <div id="wrapper">
        <table id="data_table" >
            <tr>
                <th>Nome</th>
                <th>CPF</th>
                <th>RG</th>
            </tr>
            <tr>
                <td><input type="text" id="new_name"></td>
                <td><input type="text" id="new_cpf"></td>
                <td><input type="text" id="new_rg"></td>
                <td><input type="button" class="add" onclick="add_row();" value="Adicionar"></td>
            </tr>
        </table>
    </div>


    <script>
        function edit_row(no) {
            document.getElementById("edit_button" + no).style.display = "none";
            document.getElementById("save_button" + no).style.display = "block";

            var name = document.getElementById("nome_row" + no);
            var cpf = document.getElementById("cpf_row" + no);
            var rg = document.getElementById("rg_row" + no);

            var name_data = name.innerHTML;
            var cpf_data = cpf.innerHTML;
            var rg_data = rg.innerHTML;

            name.innerHTML = "<input type='text' id='name_text" + no + "' value='" + name_data + "'>";
            cpf.innerHTML = "<input type='text' id='cpf_text" + no + "' value='" + cpf_data + "'>";
            rg.innerHTML = "<input type='text' id='rg_text" + no + "' value='" + rg_data + "'>";
        }

        function save_row(no) {
            var name_val = document.getElementById("name_text" + no).value;
            var cpf_val = document.getElementById("cpf_text" + no).value;
            var rg_val = document.getElementById("rg_text" + no).value;

            document.getElementById("nome_row" + no).innerHTML = name_val;
            document.getElementById("cpf_row" + no).innerHTML = cpf_val;
            document.getElementById("rg_row" + no).innerHTML = rg_val;

            document.getElementById("edit_button" + no).style.display = "block";
            document.getElementById("save_button" + no).style.display = "none";
        }

        function delete_row(no) {
            document.getElementById("row" + no + "").outerHTML = "";
        }

        function add_row() {
            var new_name = document.getElementById("new_name").value;
            var new_cpf = document.getElementById("new_cpf").value;
            var new_rg = document.getElementById("new_rg").value;

            var table = document.getElementById("data_table");
            var table_len = (table.rows.length) - 1;
            var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='nome_row" +
                table_len + "'>" + new_name + "</td><td id='cpf_row" + table_len + "'>" + new_cpf +
                "</td><td id='rg_row" + table_len + "'>" + new_rg + "</td><td><input type='button' id='edit_button" +
                table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len +
                ")'> <input type='button' id='save_button" + table_len +
                "' value='Salvar' class='save' onclick='save_row(" + table_len +
                ")'> <input type='button' value='Deletar' class='delete' onclick='delete_row(" + table_len +
                ")'></td></tr>";

            document.getElementById("new_name").value = "";
            document.getElementById("new_cpf").value = "";
            document.getElementById("new_rg").value = "";
        }
    </script>
</body>

</html>