Em algumas situações nós precisamos criar tabelas dinamicamente. Nesta dica eu mostro como isso pode ser feito. O primeiro passo é criar o elemento HTML table com uma chamada ao método createElement() do objeto document. Em seguida usamos este mesmo método para criar o elemento tbody da tabela. Finalmente usamos os métodos insertRow() do objeto tbody e insertCell() do objeto tr (que representa cada linha da tabela) para criar as linhas e colunas.
Veja o código completo para o exemplo:
<html>
<head>
<title>Estudos JavaScript</title>
<script type="text/javascript">
function criarTabela(){
// vamos criar o elemento HTML table
var tabela = document.createElement("table");
tabela.border = "1px";
tabela.cellSpacing = "0px";
tabela.cellPadding = "3px";
// vamos criar o corpo da tabela, ou seja, o tbody
var corpo = document.createElement("tbody");
tabela.appendChild(corpo);
// vamos criar três linhas contendo quatro células cada uma
for(var i = 0; i < 3; i++){
var linha = corpo.insertRow(-1);
for(var j = 0; j < 4; j++){
var celula = linha.insertCell(-1);
celula.innerHTML = "Célula " + i + ", " + j + "";
}
}
// vamos anexar a tabela recém-criada a um elemento div
var container = document.getElementById("container");
container.appendChild(tabela);
}
</script>
</head>
<body>
<div id="container"></div>
<br>
<button onclick="criarTabela()">Criar tabela dinamicamente</button>
</body>
</html>
Nenhum comentário:
Postar um comentário