4

Estou a tentar criar uma tabela em JavaScript para depois utilizá-la numa pagina, mas esta difícil de realizar

O objetivo é que a tabela represente um conjunto de camas de um hospital que irão ser geridas através da pagina HTML.

Como fazer isto?

4
  • Como assim? você quer gerar o código da tabela HTML através do Javascript? Commented 5/02/2015 às 16:30
  • 2
    Poste o código que já possui e seja mais específico em qual ponto é sua dúvida. Commented 5/02/2015 às 16:31
  • Boa tarde, minha resposta lhe ajudou? Por favor me informe se tiver alguma duvida ainda. se não e a resposta lhe foi útil, por favor marque a como "correta". Grato.
    – Syzoth
    Commented 10/11/2015 às 17:12
  • Boa tarde, gostaria de saber se alguma das respostas lhe ajudou, se não por favor comente o que acha que falta.
    – Syzoth
    Commented 21/04/2018 às 15:40

2 Respostas 2

8

Para criar elementos dinamicos com JavaScript, você deve usar document.createElement e para adicionar a outro elemento html já existente, você deve usar Node.appendChild().

Para criar uma tabela, você deve chamar algo como:

var novaTabela = document.createElement("table");

Para adicioná-la a um DIV existente como:

<div id="test"></div>

Você de fazer isto:

var novaTabela = document.createElement("table");
document.getElementById("test").appendChild(novaTabela);

A tabela geralmente necessita (é recomendável) de <thead> e <tbody> (as vezes pode-se usar <tfoot>, mas é opcional).

Para criar o <thead> e o <tbody> faça isto:

var tabela = document.createElement("table");
var cabecalho = document.createElement("thead");
var corpo = document.createElement("tbody");

tabela.appendChild(cabecalho);
tabela.appendChild(corpo);

document.getElementById("test").appendChild(tabela);

Nota: Dentro do <thead>, use <th> ao invés de <td>

Leia sobre as tags:

Usando o innerHTML

Alguns vão criticar, mas não mata ninguém usar o innerHTML as vezes, você pode tentar algo como:

var container = document.getElementById("container");
container.innerHTML = [
  '<table>',
  '<thead>',
  '<tr>',
  '<th>id</th>',
  '<th>col1</th>',
  '<th>col2</th>',
  '<th>col3</th>',
  '</tr>',
  '</thead>',
  '<tbody>',
  '<tr>',
  '<td>1</td>',
  '<td>data</td>',
  '<td>data</td>',
  '<td>data</td>',
  '</tr>',
  '<tr>',
  '<td>2</td>',
  '<td>data</td>',
  '<td>data</td>',
  '<td>data</td>',
  '</tr>',
  '<tr>',
  '<td>3</td>',
  '<td>data</td>',
  '<td>data</td>',
  '<td>data</td>',
  '</tr>',
  '</tbody>',
  '</table>'
].join("\n");
table {
  border: 1px #c0c0c0 solid;
  width: 100%;
}
table th {
  background-color: #00f;
  color: #fff;
}
table td {
  background-color: #f0f0f0;
  color: #0c0c0c;
}
<div id="container"></div>

1
  • Legal o código! Como posso fazer para retornar dados em JSON e criar as <td> dinamicamente?
    – Igor Silva
    Commented 1/04/2016 às 21:09
5

Criei essa função pra você, se quiser usa-la.

function criarTabela(conteudo) {
  var tabela = document.createElement("table");
  var thead = document.createElement("thead");
  var tbody=document.createElement("tbody");
  var thd=function(i){return (i==0)?"th":"td";};
  for (var i=0;i<conteudo.length;i++) {
    var tr = document.createElement("tr");
    for(var o=0;o<conteudo[i].length;o++){
      var t = document.createElement(thd(i));
      var texto=document.createTextNode(conteudo[i][o]);
      t.appendChild(texto);
      tr.appendChild(t);
    }
    (i==0)?thead.appendChild(tr):tbody.appendChild(tr);
  }
  tabela.appendChild(thead);
  tabela.appendChild(tbody);
  return tabela;
}
document.getElementById("tabela").appendChild(criarTabela([
  ["id", "nome",     "idade"],
  [1,    "matheus",  16],
  [2,    "cristian", 16],
  [3,    "pedro",    10],
  [4,    "henrique", 10]
]));
<div id="tabela"></div>

5
  • Seja bem vindo ao StackOverflow em Português, Mateus obrigado pela colaboração, porém o objetivo da comunidade é apresentar "respostas" as questões, ou seja, a sua resposta deve ser uma "RESPOSTA" a pergunta e não um compartilhamento de código apenas. No tour leia a parte que fala "Obtenha respostas para perguntas práticas e detalhadas" e depois leia pt.stackoverflow.com/help/how-to-answer :)
    – Syzoth
    Commented 10/02/2015 às 16:58
  • @GuilhermeNascimento sei que a pergunta é antiga. Mas não concordo com seu comentário. Existem muitas respostas por aqui que são apenas códigos, e nesse caso aqui, o Matheus apresentou um código funcional e de acordo com a pergunta.
    – durtto
    Commented 10/11/2015 às 17:06
  • @EduardoSeixas Talvez você não entenda o proposito do site, vou lhe explicar, espero que não leve a mal. O proposito não é apenas dar código aqui no site, mas sim conhecimento, um código é legal, mas ele deve vir acompanhado de uma explicação, em nenhum momento eu disse que o código é ruim ou não funciona, ou seja eu não critiquei o código e sim a maneira que a resposta foi formulada. Isto que eu fiz se chama critica construtiva, note que na minha resposta abaixo eu expliquei as funções e citei fontes. Espero realmente que entenda isto como critica construtiva :)
    – Syzoth
    Commented 10/11/2015 às 17:11
  • @Matheus Cristin. Como posso fazer para retornar dados em JSON e criar as <td> dinamicamente?
    – Igor Silva
    Commented 1/04/2016 às 21:10
  • So tenho a agradecer a postagem do senhor Mateus,pois foi a unica maneira que serviu para me ensinar como fazer, Postando um modelo funcional,curto e objetivo. Obrigado Mateus e a todos pelo espaco disponibilizado.
    – Carlos
    Commented 21/04/2018 às 15:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .