Backup igual abre e fecha colchetes e ponto e vírgula podem copiar o nome da variável vocês vão descer até depois da linha document.on document Element e podem colar a variável dados backup pon push abre e fecha parênteses e abre e fecha colchetes dentro dos parênteses e.
Dentro dos colchetes vai todas as informações que nós enviamos para a tabela no meu caso data linha marca e produto Então dentro dos colchetes variável data vírgula linha vírgula marca vírgula produto e fecha a linha de código com com ponto e.
Vírgula desta forma sempre que nós salvar uma linha para a tabela nós vamos inserir também uma nova linhaway dados backup próximo passo é salvar este arway no navegador então comando local Storage local Storage ponto set item abre e fecha parênteses e dentro.
Dos parênteses abre e fecha aspas duplas e dentro das aspas duplas vai o nome que nós vamos colocar na informação eu vou colocar como sendo backup backup tabela fora das aspas duplas Jon P string string string.
Backup no entanto agora tem um detalhe quando eu excluir uma linha da tabela eu preciso atualizar Array dados backup então podem copiar o nosso Array dados função excluir linha depois das linhas de córtico da função Cola arway dados backup p l = 0 limpei o arway porque agora eu vou fazer um laço para percorrer todas as linhas.
Da tabela e colocar esta informação no arway dados backup fechei a linha de código com ponto e vírgula próximo passo é referenciar a tabela var tabela vai ser igual a document pget Element by ID abre e fecha parênteses e abre e fecha aspas duplas dentro dos parênteses e dentro das aspas duplas vai.
O ID da tabela então acessem o arquivo forme P HTML localiza a tabela e copia o ID copia o ID volta no código e cola dentro das aspas duplas e fecha a linha de código com ponto e vírgula próximo passo é referenciar as linhas da tabela eu vou chamar esta variável de linhas vai ser igual vem da tabela.
Referenciada ponto get get elements cuidem pessoal que agora é diferente é get Element by tag name abre e fecha parênteses e abre e fecha aspas duplas dentro dos parênteses e dentro das aspas duplas objeto TR que se refere às linhas da tabela e fecha a linha de código com ponto e.
Vírgula próximo passo é fazer um laço para percorrer as linhas for abre e fecha parênteses e abre e fecha Chaves e dentro dos parênteses vai i = a 0 ponto e vírgula e vai fazer enquanto a variável I for menor que a variável linhas ponto language ponto e vírgula e.
Veja Também:
Mais mais e dentro deste laço Eu preciso de
Uma variável para referenciar a linha var linha vai ser igual abre e fecha colchetes e fecha a linha de código com ponto e vírgula e eu preciso referenciar também as colunas das Linhas então vai colunas vai ser igual vem da variável.Linhas cuidem para não confundir variável linhas variável linha prestem atenção a este detalhe depois da variável linhas abre e fecha colchetes e dentro dos colchetes variável I que representa a posição é em que o laço está fora dos colchetes ponto get elements by tag name abre e fecha parênteses e abre e fecha aspas duplas dentro dos.
Parênteses e dentro das aspas duplas objeto TD que se refere as células das colunas e fecha a linha de código com ponto e vírgula beleza referenciamos as colunas esta variável linha pessoal vai servir para capturar a informação da linha da tabela então agora dentro deste laço for eu preciso de mais um laço para.
Percorrer as colunas da linha então for abre e fecha parênteses e abre e fecha Chaves e dentro dos parênteses Vai J agora eu estou utilizando o J porque a variável I eu já utilizei no laço anterior variável J = 0 ponto e vírgula e vai fazer enquanto a variável J for menor que é a variável.
Colunas pon leng ponto e vírgula j+ mais para percorrer todas as colunas da linha e dentro deste laço eu vou colocar um if porque a coluna do botão de comando eu não quero colocar no Array dados backup então if abre e fecha parênteses e abre e fecha Chaves e pressiona enter e dentro dos.
Parênteses variável colunas abre e fecha colchetes e dentro dos colchetes variável J fora dos colchetes vocês vão colocar ponto Inner text iner Tex cuidem que tem 2n espaço ponto de exclamação igual que quer dizer diferente abre e fecha aspas duplas e.
Dentro das aspas duplas vocês vão colocar excluir fora das aspas duplas 2 comercial e eu vou vericar também é diferente de vazio então variável colunas abre e fecha colchetes variável.
J fora dos colchetes ponto intext intext espaço ponto de exclamação igual que quer dizer diferente e abre e fecha aspas duplas se for diferente de excluir e diferente de vazio eu vou capturar a informação então podem pegar a variável linha linha ponto.
Push abre e fecha parênteses e dentro dos parênteses vai a variável colunas abre e fecha colchetes e dentro dos colchetes variável J fora dos colchetes ponto iner Text e fecha a linha de código com ponto e vírgula desta forma nós vamos capturar todas as informações das colunas para a variável linha próximo passo é.
Transferir esta linha para para o arway dados backup então depois de fechar o segundo
Laço for e dentro do primeiro laço for nós vamos colocar um if se a variável linha for maior que zero nós vamos colocar esta linha no arway dados backup if abre e fecha parênteses e abre e fecha Chaves e pressiona enter e dentro.Dos parênteses variável linha ponto leng ponto leng se for diferente de zero então ponto de exclamação igual que quer dizer diferente de zero se for diferente de zero eu vou colocar esta linha no arway dados backup podem copiar e colar dentro do IF dados.
Backup pon push abre e fecha parênteses e dentro dos parênteses vai a variável linha e fecha a linha de código com ponto e vírgula desta forma nós vamos transferir todos os registros da tabela para o array dados backup linha por linha atualizamos o arway agora depois que sair dos dois laços nós precisamos salvar este arway.
No navegador para facilitar vocês podem Copiar esta linha de código copia e vocês vão colar antes das chaves que fecha a função desta forma quando o usuário deletar uma linha da tabela nós vamos atualizar também o nosso backup prosseguindo agora galera nós precisamos fazer o seguinte quando o formulário for.
Iniciado se o nosso backup tiver dados nós precisamos carregar estes dados de volta na tabela do formulário Então nós vamos fazer o seguinte document event listener abre e fecha parênteses e abre e fecha aspas duplas dentro dos parênteses e dentro das aspas duplas vocês vão colocar o.
Comando content content ladet cuidem para digitar corretamente fora das aspas duplas vírgula vem o nome da função que vai ser acionada nós vamos fazer uma função chamada iniciar formulário e fecha a linha de código com ponto e vírgula próximo passo é fazer esta.
Função podem copiar o nome function iniciar formulário abre e fecha parênteses e abre e fecha Chaves e dentro desta função primeiro passo quando o formulário for iniciado é capturar o nosso arway Que Nós salvamos no navegador com o nome debta tabela Então agora eu vou colocar uma variável que eu vou chamar de backup.
Backup igual vai ser igual ao comando Jon pto parce pto parce abre e fecha parênteses e dentro dos parênteses vocês vão colocar o comando local storage ponto get item para pegar o item mas aqui o i é em caixa alta get.
Item abre e fecha parênteses e abre e fecha aspas duplas dentro dos parênteses e fecha a linha de código com ponto e vírgula e dentro das aspas duplas vai o nome que nós colocamos no nosso backup nós chamamos de backup tabela podem copiar o nome e colar dentro das aspas duplas na sequência nós precisamos verificar se tem informação no backup.
Porque pode ser que o backup seja nulo ou esteja Zerado então if abre e fecha parênteses e abre e fecha Chaves e dentro dos parênteses variável backup ponto de exclamação igual que quer dizer diferente se for diferente de nulo e dentro deste if nós vamos colocar mais.
Um if if abre e fecha parênteses abre e fecha ches e pressiona enter e dentro dos parênteses se a variável back P for maior zer neste caso significa que nós temos registros no nosso backup Se entrou dentro deste segundo if.
Nós vamos acionar outra função para carregar os registros do nosso backup para a tabela do formulário nós vamos fazer uma função chamada carregar backup abre e fecha parênteses e esta função ela vai receber a variável backup e fecha a linha de código com ponto e vírgula beleza próximo passo é fazer a.
Função carregar backup podem copiar o nome da função e agora vai ser uma nova function function carregar backup e agora eu vou chamar esta variável dentro dos parênteses de dados dados fora dos parênteses abre e fecha Chaves e pressiona enter e dentro.
Desta função Primeiro passo é referenciar a tabela então var tabela vai ser igual a document pget Element by ID abre e fecha parênteses e abre e fecha aspas duplas dentro dos parênteses e dentro das aspas duplas vai o ID da tabela então acessem o arquivo for. HTML copia o ID da tabela volta no.
Código e cola dentro das aspas duplas fora dos parênteses pon get elements by tag name abre e fecha parênteses e abre e fecha aspas duplas dentro dos parênteses e dentro das aspas duplas vai o comando tb fora dos parênteses abre e fecha colchetes e dentro dos colchetes posição zero e fecha a linha de código com ponto.
E vírgula próximo passo é fazer um laço para transferir os dados para a tabela então form abre e fecha parênteses e abre e fecha Chaves e dentro dos parênteses vai i ig a 0 ponto e vírgula e vai fazer enquanto.
A variável I for menor que o Array dados p l ponto e vírgula e mais mais e dentro deste laço a cada linha que o laço passar nós vamos inserir uma nova linha na tabela agora nós podemos reaproveitar parte dos códigos da função enviar.
Tabela localiza a função enviar tabela e vocês vão copiar desde a variável nova linha vai ser até a linha de código do botão excluir copia esta parte volta na função carregar backup e vocês vão colar dentro do laço for deixa eu dar uma ajustada neste código para ficar bem posicionado portanto agora nós.
Precisamos ajustar onde nós colocamos a informação na tabela agora nós vamos pegar as informações do arway dados arway dados abre e fecha colchetes e dentro dos colchetes variável I que representa a linha em que o laço está abre e fecha colchetes coluna zero do arway para as demais colunas podemos.
Reaproveitar esta parte e alterar a coluna do arway coluna 1 na sequência vai ser a coluna 2 por fim a coluna 3 e o botão de comando continua igual desta forma nós vamos transferir linha por linha do arui dados para a tabela HTML do nosso.
Formulário agora pessoal depois que sair do laço nós vamos atualizar o nosso Array dados backup para facilitar vocês vão fazer o seguinte podem copiar o nome do arway dados backup e agora o nosso backup antes da última Chaves que fecha a função carregar backup aray dados backup vai ser igual ao nosso.
Array dados e fecha a linha de código com ponto e vírgula e agora nós precisamos descer a barra de rolagem para podem Copiar esta linha de código copia volta para a função carregar backup e cola e no final da função eu quero colocar o foco do cursor no campo linha então variável Campo.
Linha ponto focos abre e fecha parênteses e fecha a linha de código com ponto e vírgula desta forma quando o formulário for iniciado se tiver informações no backup nós vamos carregar de volta na tabela e atualizar o nosso Array dados backup porque o arway dados backup quando o formulário é fechado ele é Zerado no entanto Como Nós salvamos as informações.
No navegador quando o formulário é iniciado nós capturamos de volta a informação por isso quando nós carregamos o backup Nós atualizamos também o arway dados backup desta forma quando o usuário inserir mais informações ele já vai ter os dados anteriores e vai acrescentar a nova.
Informação entendido este detalhe agora nós precisamos fazer mais uns ajustes na função limpar localiza a função limpar e depois de acionar a função fechar nós vamos remover as informações de backup ou seja se o usuário clicar no botão limpar nós vamos limpar tudo inclusive o backup então local Storage pon remove remove.
Item abre e fecha parênteses e abre e fecha aspas duplas dentro dos parênteses e fecha a linha de código com ponto e vírgula e dentro das aspas duplas vai o nome que nós colocamos na informação que foi este aqui ó backup tabela copia o nome volta na função limpar e cola dentro das aspas duplas e.
Eu vou limpar também hway dados backup dados backup penget ig a e ponto e vírgula beleza fizemos os scripts para salvar um backup dos registros da tabela salva as alterações e agora é a hora da verdade vamos ver se vai salvar os registros no backup eu vou colocar qualquer informação apenas para testar.
Acrescentar mais uma linha sempre é bom testar com mais de uma linha salvei os registros na tabela fechei o formulário e agora será que eu perdi os registros vamos ver show de bola galera retornou a informação para o formulário desde que o navegador não foi fechado Se eu colocar os registros na tabela e fechar o formulário sem salvar para a planilha.
Google quando eu iniciar o formulário novamente os registros vão retornar para o formulário vamos ver se eu excluir uma linha fechei o formulário agora quando abrir o formulário precisa ter somente uma linha vamos acrescentar uma nova linha precisa testar pessoal todas as possibilidades acrescentei três linhas então a informação referente ao b não.
Postar um comentário