 |
|
||||
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: 18177 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:
<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 + "";
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 |
|
Java - Exercício Resolvido de Java - Usando um laço for para contar de 0 até 10 e somar todos os valores |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
