Javascript Textarea em Tabela (JavaScript)

[Thyago Barbosa]

Galera, alguém sabe algo em JavaScript (Puro) que transforme valores de uma textarea em uma tabela utilizando " | " para separar colunas (<td>) e o enter/ quebra de linha pra separar a <tr> igual está na imagem abaixo (Obs: Será através de um botão onclick que será feito essa transformação, não está na imagem porque foi só pra ilustrar mesmo)

Se alguém souber, por gentileza manda exemplo online

[DiF]

@Thyago Barbosa Olá, você não vai encontrar algo pronto. Seja em javascript puro ou jQuery.

Contudo podemos dar um norte para você mesmo tentar fazer.

 

Parta desta premissa:

O valor do campo textarea é inteiro. Para pegar o valor linha a linha é necessário fazer um split("\n")

Separando, você deve por em um laço de for para percorrer os elementos e montar a tabela.

Se quiser um exemplo funcional leia este link: https://pt.stackoverflow.com/questions/202438/pegar-dados-de-um-textarea-e-preencher-tabela-html

 

Recomendo que não copie nenhum dos códigos. Pois as chances de dar errado é altas. Por isso estude e tente implementar a sua função que faça esta montagem da tabela.

 

Se for para estudos, beleza, mas se for para uso diário, o que você quer fazer é inútil. Uma vez que você fechar a página ou atualizar com F5 sua tabela será perdida. 

[Thyago Barbosa]

@DiF Não po, essa parte de conversão pra tabela não é pra manter o valor, é que estou querendo fazer o seguinte, quero transformar o textarea em tabela, e na tabela quero usar um "SortBy" pra organizar em ordem alfabética tal coluna, e depois que fizer isso, quero que transforme essa tabela editada novamente em um texto. Só que daí estou fazendo em partes pra não ficar muito complicado
 

[Felipe Paz]

@Thyago Barbosa e precisa disso mesmo? Não seria mais interessante ter uma tabela e, caso precise de algum dado, pegue esse dado e use-o como queira? Veja bem, haverá inúmeros tratamentos para essa operação. Primeiro você vai pegar o value do textarea e transformar em tabela. Mas esse value vai precisar de delimitadores para cada dado:

Dado 1 | Dado 2 | Dado 3 | Dado 4. Cada pipe "|" é um delimitador, neste exemplo. A partir disso vai ter de fazer um foreach e cada vez que encontrar um delimitador, vai pegar esse resultado a atribuir a uma variável que será encarregada de gerar a td da tabela. Para gerar o sort, você vai ter de configurar essa tabela que ainda não existe ou existe, não sei como você vai fazer, ou pegar uma datatable do próprio boostrap que já vem setada para isso. Por fim, a tabela criada se torna novamente em textarea, terá de fazer novamente foreach em cada td, transformar numa super string e jogar num textarea. Realmente, precisa disso? Acredito que manipular direto na tabela seria mais produtivo.

[Thyago Barbosa]

@Felipe Paz É porque se eu utilizar a tabela direto no navegador, não vou conseguir manter os dados da tabela, a não ser que funcionasse igual à um arquivo de excel, que mesmo trocando de computador ele mantem os dados que foram digitados. Teria alguma forma de armazenagem de dados (sem ser com LocalStorage que não armazena muita coisa) utilizando JavaScript puro?

[DiF]

@Thyago Barbosa

17 minutos atrás, Thyago Barbosa disse:

Teria alguma forma de armazenagem de dados (sem ser com LocalStorage que não armazena muita coisa) utilizando JavaScript puro?

Tem uma forma sim.  É mais complexo e você terá que aprender. 

O indexedDB.   é um banco de dados orientada a objetos que pode ser rodado diretamente no navegador, podendo ou não usar a conectividade(offline ou online). Serve para grandes quantidades de dados. Seria algo muito parecido com o WEBsql, só que direto no navegador e orientada a objetos.

 

Comece pelos conceitos básicos lendo este artigo primeiro.

Depois podes aprender com exemplos lendo esta parte

[Thyago Barbosa]

@DiF Entendi, mas por exemplo, se eu pegar esse arquivo html, e abrir em outro computador, ele vai continuar com os dados que estavam lá ou só se abrir o html na mesma máquina em que foi salva os dados?

[DiF]

@Thyago Barbosa Ah, provavelmente os dados ficarão no navegador da pessoa somente.  A menos que você use este indexedDB online. Isso por questões de segurança.

 

Se você quiser abrir offline em qualquer máquina,  você vai ter que implementar um recurso para exportar todos seus dados em um arquivo .json  que é acrônimo de JavaScript Object Notation. Com ele você pode condensar vetores de dados e itera-los com javascript.

 

Exemplo de uma estrutura JSON:

var carrinhoDeCompras = [
  			  {"produto":"Processador","qtd":1,"preco":40.25},
  			  {"produto":"Memoria","qtd":2,"preco":435.80},
  			  {"produto":"Placa de vídeo","qtd":1,"preco":1568.00}
			];

Mais ou menos isso.. Nesse caso, você exportaria para um arquivo separado contendo toda a estrutura dos seus dados em forma de um array de objetos.  O arquivo serviria como se fosse um banco de dados. só não sei dizer o quanto o arquivo ficará pesado se tiver centenas de milhares de linhas.

 

Se eu fosse você, implementaria um sistema online, onde você possa acessar os dados de um banco de dados por qualquer dispositivo.. seja, PC, tablet, smartphone.. e etc.