How to edit tables in Javascript

Asked

Viewed 597 times

0

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

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

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

PS:

I did the removal with a checkbox field. that picks up 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 css html5

  • Friend, it may be a little more complicated than that. The purpose of this table and this form is to work with a database?

  • In fact I think after that it will be this, because simply my boss came and talked make this screen. kkkkk

  • Have you considered the possibility of using plugins like this: http://www.jqueryscript.net/demo/Simple-In-line-Editing-Plugin-For-jQuery-Quick-Edit/

  • I still do not know how to use kkk, it is to be a simple screen because I am at the beginning of college and internship, and as it is software engineering takes a little longer to get programming. So this screen has to be as pure as possible (html, Javascript and Css). All done by hand.

  • Or you could use this one already https://vitalets.github.io/angular-xeditable/#Editable-Row because you already have the ajax request for your back-end (whatever) to manipulate the database.

  • I understand, but if it’s that simple, you know the data won’t be saved, right? You could even store the data in the browser, but would risk losing it easily. When you have a little time, analyze this tutorial.https://codepen.io/manolof/post/angularjs-todo-save-data-to-localstorage-or-to-txt-file-using-php#local It might help you. unfortunately I can’t make the solution for you now... it would take a little time.

  • ok, thank you very much, and that would be just that, without saving the data (a hitherto useless application).

Show 2 more comments

1 answer

1

Dear, I edited a code that I already had here on PC and adapted its need, with the values of Name, CPF and RG. Now just read to understand and change the style as 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>

Browser other questions tagged javascript css html5

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