Get the value of the javaScript table and put it in an array

Question

Get the value of the javaScript table and put it in an array

Navigation

#1 by (4 votes)
#2 by (3 votes)

4

I have a problem, I made a PivotTable in JavaScript and want to throw your data into an array, I tried using JSON but when I click the button to run the event it does nothing. I do not know if a plugin is missing, since I have never worked with JSON, follow the code.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>

    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/jquery.validate.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script><!--Aquiestaomeuscriptparacriaratabela--><title>ControledeMaterial</title><scripttype="text/javascript">
      totals = 0;
      function adiciona() {
        totals++

        var tbl = document.getElementById("tabelaPedido");
        var novaLinha = tbl.insertRow(-1);
        var novaCelula;

        if(totals%2==0)
          cl = "#FFFFFF";
        else
          cl = "##FFFFFF";

        novaCelula = novaLinha.insertCell(0);
        novaCelula.align = "left";
        novaCelula.style.backgroundColor = cl;
        novaCelula.innerHTML = document.getElementById('cprod').value;

        totals;

        novaCelula = novaLinha.insertCell(1);
        novaCelula.align = "left";
        novaCelula.style.backgroundColor = cl;
        novaCelula.innerHTML =  document.getElementById('cquant').value;
        novaCelula2 = novaLinha.insertCell(2);
        novaCelula.align = "left";
        novaCelula.style.backgroundColor = cl;

        var btnEl = document.createElement('input');

        btnEl.setAttribute('type', 'button');
        btnEl.setAttribute('class', 'btn');

        btnEl.onclick = function () {
          deleteRow(this.parentNode.parentNode.rowIndex)
        };

        btnEl.setAttribute('value', 'Delete');
        novaCelula2.appendChild(btnEl);
      }

      //Função para excluir a linha
      function deleteRow(i) {
        document.getElementById('tabelaBanco').deleteRow(i)
      }

      function pedido() {
        // Percorrer todas as linhas do corpo da tabela
        $('#tabelaPedido tbody tr').each(function () {
          // Recuperar todas as colunas da linha percorida
          var colunas = $(this).children();
          var pedidos = [];
          // Criar objeto para armazenar os dados
          var pedido = {
            'produto': $(colunas[0]).text(), // valor da coluna Produto
            'quantidade': $(colunas[1]).text() // Valor da coluna Quantidade
          };
          // Adicionar o objeto pedido no array
          pedidos.push(pedido);
        });
        // listando os pedidos função teste
        alert(pedidos);
        alert("esta funcionando");
      }
    </script>
  </head>
  <body>
    <form>
      <table>
        <tr>
          <td><p>Produto:</p></td>
          <td><p>Quantidade</p></td>
        </tr>
        <tr>
          <td><input type="text" name="produto" id="cprod"></td>
          <td><input type="text" name="quantidade" id="cquant"></td>
          <td><input type='button' id='incluir' class="btn" value='Incluir Produto' onclick='adiciona()'/></td>
        </tr>
      </table>
      <table id='tabelaPedido' class="table table-hover" border='0' width='100%'>
        <thead>
          <tr style='background-color:#FBF6F7'>
            <td class="produto"><strong>Produto</strong></td>
            <td class="quantidade"><strong>Quantidade</strong></td>
            <td><strong>Excluir</strong></td>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      <br>
      <!-- chamando a função para pegar os dados e imprimir na telana -->
      <input class="btn" type = "submit" name = "but" value = "Confirmar Pedido" onclick='pedido()'/>
      <br>
      <br>
      <br>
    </form>
  </body>
</html>

javascript json

asked by anonymous 16.11.2015 / 14:35

2 answers

Generate random numbers in Java CamelCase conversion function

score 4 · Answer 1

One of the obvious errors is that you are not adding table rows in the right place, like in this image, when adding two products see where they were inserted in the code:

Your code and many things that can be improved, I took the liberty of developing a script with some features that helped in the performance and organization aspects.

Here's an example:

var produtos = {
    index : 0,
    tBody: document.getElementById('lstProdBody'),
    pedidos: {}, 
	adicionar: function(e) {
        // Impede de submeter a página.
        e.preventDefault();
    	
        var prod = document.getElementById('produto'),
            qtd = document.getElementById('quantidade');
        
        // Cria estrutura de elementos para adicionar a tabela.
        var tr     = document.createElement('tr'),
           	tdProd = document.createElement('td'),
            tdQtd  = document.createElement('td'),
            tdBtn  = document.createElement('td'),
            btn    = document.createElement('button');
        
        // Faz o aninhamento dos elementos, atribui os valores adicionados e acrescenta a tabela.
        tdProd.textContent = prod.value;
        tdQtd.textContent = qtd.value;
        
        // Limpa campos.
        prod.value = '';
        qtd.value = '';
        
        btn.setAttribute('onclick', 'produtos.excluir(event, this);');
        btn.textContent = 'Excluir';
        
        tdBtn.appendChild(btn);
        
        tr.appendChild(tdProd);
        tr.appendChild(tdQtd);
        tr.appendChild(tdBtn);
        
       	this.tBody.appendChild(tr);
    },
    excluir: function(e, elem) {
        // Impede de submeter a página.
        e.preventDefault();
        
        // Pega o elemento pai do elemento pai do botão e deleta da tabela.
        var a = elem.parentElement.parentElement;
        this.tBody.removeChild(a);
    },
    send: function(e) {
        // Impede de submeter a página.
        e.preventDefault();
        
        // Pega os valores de cada linha da tabela inclui em uma array, apos isto, adiciona no objeto pedidos.
        var pedido = [];
        
        Array.prototype.forEach.call(this.tBody.children, function(arr, index) {
            pedido.push({'produto': arr.children[0].textContent, 'quantidade': arr.children[1].textContent});
        });
        
        this.pedidos = { "pedido" : pedido };
        
        console.log(this.pedidos);
    }
}

* {
    box-sizing: border-box;
}
.cadastro-produtos {
    background-color: lightgray;
    height: 40px;
    padding: 10px;
    width: 100%;
}
.lista-produtos {
    width: 100%;
}
.lista-produtos thead tr th {
    background-color: #fbf6f7;
}

<form>
    <div class="cadastro-produtos">
        <labe>Produto:</label>
        <input type="text" id="produto">
        <labe>Quantidade:</label>
        <input type="text" id="quantidade">
        <button onclick="produtos.adicionar(event);">Adicionar</button>
    </div>
    <table class="lista-produtos">
        <thead>
            <tr>
                <th>Produto</th>
                <th>Quantidade</th>
                <th>Excluir</th>
            </tr>
        </thead>
        <tbody id="lstProdBody">
            <!-- Inclusão dinâmica -->
        </tbody>
    </table>
    <button onclick="produtos.send(event);">Confirmar Pedido</button>
    <div id="showJson"></div>
</form>

score 3 · Answer 2

I believe your code is adding new rows in the body of the table and not in tbody , so the $('#tabelaPedido tbody tr') should not be bringing records.

In any case, I'm leaving a slightly more complete implementation for what you want to do:

var handler = {
  tabela: {},
  acoes: {},
  templates: {},
  init: function (tableName) {
    this.templates.novo = document.getElementById("tmplNovo").content;        
    this.templates.editar = document.getElementById("tmplEdit").content;
    this.templates.salvar = document.getElementById("tmplView").content;
    this.templates.cancelar = this.templates.salvar;

    this.tabela.root = document.getElementById(tableName);
    this.tabela.thead = this.tabela.root.querySelector("thead");
    this.tabela.tbody = this.tabela.root.querySelector("tbody");
    this.tabela.tfoot = this.tabela.root.querySelector("tfoot");

    this.acoes.novo = this.tabela.thead.querySelector("[data-action='novo']");
    this.acoes.finalizar = this.tabela.tfoot.querySelector("[data-action='finalizar']");

    this.acoes.novo.addEventListener("click", this);
    this.acoes.finalizar.addEventListener("click", this);

  },
  handleEvent: function (event) {
    var self = this;
    var atual = {};
    var linha = {};
    var action = event.target.dataset.action;

    atual.root = event.target.parentNode.parentNode;  
    if (atual.root.dataset.estado) {
      atual.produto = atual.root.querySelector("[name='produto']");
      atual.quantidade = atual.root.querySelector("[name='quantidade']");
    }

    if (self.templates[action]) {        
      linha.root = document.importNode(self.templates[action], true);    
      linha.actions = linha.root.querySelectorAll("[data-action]");  
      linha.produto = linha.root.querySelector("[name='produto']");
      linha.quantidade = linha.root.querySelector("[name='quantidade']");

      [].forEach.call(linha.actions, function (elem, indice) {
        elem.addEventListener("click", self);
      });
    }

    self[action](event, atual, linha);
  },
  novo: function (event, atual, linha) {
    var self = this;
    self.acoes.novo.disabled = "disabled";
    self.acoes.novo.readOnly = "readOnly";

    self.tabela.tbody.appendChild(linha.root);
    linha.produto.focus();
  },
  salvar: function (event, atual, linha) {
    var self = this;
    if (atual.root.dataset.estado === "novo") {
      self.acoes.novo.disabled = null;
      self.acoes.novo.readOnly = null;
    }

    linha.produto.textContent = atual.produto.value;
    linha.quantidade.textContent = atual.quantidade.value;

    self.tabela.tbody.insertBefore(linha.root, atual.root);
    self.tabela.tbody.removeChild(atual.root);
  },
  apagar: function (event, atual, linha) {
    var self = this;
    if (atual.root.dataset.estado === "novo") {
      self.acoes.novo.disabled = null;
      tselfhselfis.acoes.novo.readOnly = null;
    }
    self.tabela.tbody.removeChild(atual.root);
  },
  editar: function (event, atual, linha) {
    var self = this;

    linha.produto.value = atual.produto.textContent;
    linha.quantidade.value = atual.quantidade.textContent;
    linha.produto.dataset.oldValue = linha.produto.value;
    linha.quantidade.dataset.oldValue = linha.quantidade.value;   

    self.tabela.tbody.insertBefore(linha.root, atual.root);
    self.tabela.tbody.removeChild(atual.root);
    linha.produto.focus();
  },
  cancelar: function (event, atual, linha) {
    var self = this;

    linha.produto.textContent = atual.produto.dataset.oldValue;
    linha.quantidade.textContent = atual.quantidade.dataset.oldValue;

    self.tabela.tbody.insertBefore(linha.root, atual.root);
    self.tabela.tbody.removeChild(atual.root);
  },
  finalizar: function (event) {
    var self = this;

    self.acoes.novo.disabled = null;
    self.acoes.novo.readOnly = null; 

    var pedidos = [];
    var linhas = this.tabela.tbody.querySelectorAll("tr[data-estado]");
    [].forEach.call(linhas, function (linha, indice) {
      var pedido = {};        
      var atual = {};
      atual.produto = linha.querySelector("[name='produto']");
      atual.quantidade = linha.querySelector("[name='quantidade']");

      if (linha.dataset.estado == "view") {
        pedido.produto = atual.produto.textContent;
        pedido.quantidade = atual.quantidade.textContent;
        pedidos.push(pedido);
      }

      if (linha.dataset.estado == "edit") {
        pedido.produto = atual.produto.dataset.oldValue;
        pedido.quantidade = atual.quantidade.dataset.oldValue;
        pedidos.push(pedido);
      }

      self.tabela.tbody.removeChild(linha);
    });

    console.log(pedidos);
  }
}

handler.init("tabela");

.action input[type="image"] {
  float: right;
  width: 24px;
  height: 24px;
}

.action-novo:disabled {
  opacity: 0.5;
}
input, span {
  box-sizing: border-box;
  margin: 0px;
}

td {
  min-width: 150px;
}

td.action {
  min-width: 48px;
}

#tabela thead tr, #tabela tfoot tr { background: darkgrey; }
#tabela tbody tr:nth-child(even) {background: gainsboro}
#tabela tbody tr:nth-child(odd) {background: whitesmoke}

<table id="tabela">
  <thead>
    <tr>
      <td>Produto</td>
      <td>Quantidade</td>
      <td class="action">
        <input type="image" data-action="novo"
               src="http://cdn.flaticon.com/svg/66/66820.svg"/></td></tr></thead><tfoot><tr><td></td><td></td><tdclass="action">
        <input type="image" data-action="finalizar" 
               src="http://cdn.flaticon.com/svg/70/70050.svg"/></td></tr></tfoot><tbody></tbody></table><templateid="tmplNovo">
  <tr data-estado="novo">
    <td><input type="text" name="produto" /></td>
    <td><input type="text" name="quantidade" /></td>
    <td class="action">
      <input type="image" data-action="salvar"
             src="http://cdn.flaticon.com/svg/64/64082.svg"/><inputtype="image" data-action="apagar"
             src="http://cdn.flaticon.com/svg/24/24313.svg"/></td></tr></template><templateid="tmplEdit">
  <tr data-estado="edit">
    <td><input type="text" name="produto" data-old-value="" /></td>
    <td><input type="text" name="quantidade" data-old-value="" /></td>
    <td class="action">
      <input type="image" data-action="salvar"
             src="http://cdn.flaticon.com/svg/64/64082.svg"/><inputtype="image" data-action="cancelar"
             src="http://cdn.flaticon.com/svg/61/61918.svg"/></td></tr></template><templateid="tmplView">
  <tr data-estado="view">
    <td><span name="produto"></span></td>
    <td><span name="quantidade"></span></td>
    <td class="action">
      <input type="image" data-action="apagar"
             src="http://cdn.flaticon.com/svg/24/24313.svg"/><inputtype="image" data-action="editar"
             src="http://cdn.flaticon.com/svg/66/66931.svg" />
    </td>
  </tr>
</template>