 |
|
|
|
Você está aqui: JavaScript ::: DOM (Document Object Model) ::: table Element/Object |
Como criar um tabela (elemento HTML table) dinamicamente, contendo linhas e colunasQuantidade de visualizações: 18438 vezes |
|
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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<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>
Esta dica foi escrita e testada no Internet Explorer 8 e Firefox 3.6. |
 Link para compartilhar na Internet ou com seus amigos: |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
|
Delphi - Como calcular o coeficiente angular de uma reta em Delphi dados dois pontos no plano cartesiano |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
