5
respostas

Tabela - colunas verticais - JavaScript

Boa tarde.

Estou tentando jogar dados de uma lista json em uma tabela javascript. Já consigo carregar os dados na tabela, sendo que preciso exibir as colunas em vertical. Como poderia fazer essa montagem de colunas vertical em javascript?

Desde já agradeço.

Flávia

5 respostas

Fala ai Flávia, tudo bem? Tem algum exemplo (imagem) para eu dar uma olhada e pegar a ideia.

Fico no aguardo.

Oi Matheus. Agradeço muito a sua atenção. Vamos ao exemplo: um objeto com dados "nome,idade, altura, peso, imc", quero que na tabela apareça assim:

Nome
   Idade 
 Altura
Peso
IMC

Ou seja, as propriedades apareçam uma em cada linha da tabela ao invés de aparecer uma em cada coluna da tabela. Como posso montar a tabela desta forma no javascript?

Desde já agradeço. Flavia

Fala ai Flávia, se eu entendi corretamente, oque pode fazer é dentro do seu loop que monta o corpo da tabela, em vez de montar apenas um tr e vários td, você pode montar vários tr com apenas um td.

Pode ser que funcione.

Espero ter ajudado.

Oi Matheus. Exatamente isso que quero. Poderia me dar um exemplo na prática em javascript? Encontro vários artigos, mas montam sempre um tr e vários td. Veja o meu código:

this.criar_linha_tabela = function(){

// Criar elementos

var linha = document.createElement("tr"); var campo_nome = document.createElement("td"); var campo_ano = document.createElement("td"); var campo_idade = document.createElement("td");

// Aplicar um estilo aos elementos campo_nome.className= "bold"

//Criar nós

var texto_nome = document.createTextNode(this.nome); var texto_ano = document.createTextNode(this.ano_informado); var texto_idade = document.createTextNode(this.calcula_idade);

//Vincular os nós aos elementos

campo_nome.appendChild(texto_nome); campo_ano.appendChild(texto_ano); campo_idade.appendChild(texto_idade); linha.appendChild(campo_nome); linha.appendChild(campo_ano); linha.appendChild(campo_idade);

//Vincular os elementos ao documento corpo_tabela.appendChild(linha); }

Com este código tenho o seguinte resultado:

Nome Ano Idade Beto 1986 33

Gostaria que ao lado do campo nome ficasse o nó Beto. Em outra linha o campo Ano e ao lado de ano 1986. Mais uma linha para o campo Idade e ao lado de idade o valor 33.

Como poderia fazer para obter este resultado? No exemplo citei apenas três linhas, mas na tabela são várias linhas com o seu valor do lado.

Desde já agradeço.

Flávia

Fala ai Flávia, tudo bem? Segue um exemplo:

https://jsfiddle.net/mahenrique94/yfj21Lwv/1/

Acho que é o que você precisava fazer.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software