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?
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?
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:
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>
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>