Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Thyago Barbosa

Javascript Textarea em Tabela (JavaScript)

Recommended Posts

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)

image.png.30dfee20b9ea535cd847a5a68469fbe7.png

Se alguém souber, por gentileza manda exemplo online

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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. 

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • Autor do tópico
  • @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
     

    Editado por Thyago Barbosa
    Esqueci de Mencionar

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @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.

    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • @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?

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @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

    Editado por DiF

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • @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?

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @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.

    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Crie uma conta ou entre para comentar

    Você precisar ser um membro para fazer um comentário






    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

    Direitos autorais

    Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

    ×