Add and save button function of an HTML Table

Question

Guys good afternoon, I am developing my TCC, I need to create a page called donations, on this page the user can donate more than one item, I managed to create an Add button where he inserts lines in an html table,so every time he type an item into the input and click the add it inserts the input value into a new row in the table. but I can’t get the values to save in the database.

Javascript

< script LANGUAGE = "JavaScript" >
  geral = 0;

function btn_add() {
  geral++
  tabelinha = document.getElementById("tabela")
  var especie1 = document.getElementById("especie");
  var qtde1 = document.getElementById("qtde");
  var novaLinha = tabelinha.insertRow(-1);
  var novaCelula;
  if (geral % 2 == 0)
    cortabela = "FFF5EE";
  else
    cortabela = "FFFAF0";

  novaCelula = novaLinha.insertCell(0);
  novaCelula.style.backgroundColor = cortabela;
  novaCelula.innerHTML = especie1.value;

  novaCelula = novaLinha.insertCell(1);
  novaCelula.style.backgroundColor = cortabela;
  novaCelula.innerHTML = qtde1.value;

  novaCelula = novaLinha.insertCell(2);
  novaCelula.style.backgroundColor = cortabela;
  novaCelula.innerHTML = '<input type="button" class="btn btn-danger" value="X" onclick="deleteRow(this)"/>';


}

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

function btn_save() {
  var resposta = confirm("Deseja salvar o registro?");

  if (resposta === true) {


  }

}

<
/script>

<div class="container">
  <h1 style="font-weight: bold;">Doações</h1>
  <hr>
  <div class="container">
    <div class="form-inline">
      <div class="form-group">
        <label for="cliente">Cliente:</label>
        <input type="text" class="form-control" id="cliente" name="cliente">
      </div>
      <div class="form-group">
        <label for="data"></label>
        <input type="date" class="form-control" id="data" name="data">
      </div>
    </div>
    <br>
    <div class="form-inline">
      <div class="form-group">
        <label class="" for="especie">Especie:</label>
        <input type="text" name="especie" id="especie" class="form-control">
      </div>
      <div class="form-group">
        <label class="" for="qtde">Qtde:</label>
        <input type="text" name="qtde" id="qtde" class="form-control">
      </div>
      <div class="form-group">
        <label class="" for="local">Local:</label>
        <input type="text" name="local" id="qtde" class="form-control">
        <input class="btn btn-success" type='button' id='incluir' value='incluir' onclick='btn_add();' />
      </div>
    </div>
  </div>
</div>


<div class="container">
  <table id='tabela' class="table table-hover table-responsive">
    <tr>
      <td>Espécie</td>
      <td>Qtde</td>
      <td>Excluir</td>
    </tr>
  </table>
</div>

<div class="container">
  <div class="form-group form-inline">
    <label class="control-label col-sm-12"></label>
    <div class="col-sm-3">
      <input class="btn btn-warning" type='button' id='salvar' value='Salvar' onclick="btn_save();" />
    </div>
  </div>
</div>

In case it would have to press the save button where it would store the value of all inputs and html table items in the database.

Answer 1

I think you should keep a reference of those values you add in variables... but you can of course make a table and read the value from there. An example would be:

const tabela = document.getElementById('tabela');
const rows = [...tabela.querySelectorAll('tr')]
  .slice(1) // o slice é para remover a primeira linha com os labels
  .map(el => [...el.children].map(el => el.textContent));

const data = rows.reduce((arr, [tipo, valor]) => arr.concat({
  tipo,
  valor
}), []);

console.log(JSON.stringify(data, null, 4));

<table id='tabela' class="table table-hover table-responsive">
  <tr>
    <td>Espécie</td>
    <td>Qtde</td>
    <td>Excluir</td>
  </tr>
  <tr>
    <td>X</td>
    <td>150</td>
    <td>Excluir</td>
  </tr>
  <tr>
    <td>Y</td>
    <td>250</td>
    <td>Excluir</td>
  </tr>
</table>