Tabela Dinâmica com javascript

August 10, 2007 9:26 am

Bom passei nos posts anteriores alguns exemplos de como trabalhar com DOM.

Agora temos um exemplo de como gerenciar as linhas e colunas de uma tabela com javascript, o que chamamos de Tabela Dinâmica.

Neste exemplo usaremos um pouco, bem pouco de como trabalhar com os nós, mas é um começo para entender as utilidades, fora isso tem algumas coisas bem interessantes.

  • Como criar uma linha na tabela
  • Eliminando linha da tabela
  • Eliminando todas linhas da tabela

Vou falar pouco porque semana que vem terei novamente férias :D
Então estou adiantando algumas coisas aqui no trabalho, mas acredito que o código esteja bem comentado, mas em caso de dúvidas perguntem a vontade, depois em casa as responderei tranqüilamente.
Sobre o script do layout antigo, que escorregava o post.. esse final de semana passo aqui para vocês, mas não é meu, logo vai estar todo em inglês, mas passarei a quem interessar, futuramente monto um exemplo igual aquele dai sim comentado.

A página para ver o código e exemplo:

Tabela Dinâmica 1.0.0

Compare preços

20 Comentários para “Tabela Dinâmica com javascript”

Victor de Souza Couto Escreveu um comentário on August 10, 2007

Muito bom o script Rodrigo!
E férias é sempre bom né! Duas vezes então…
iuehaheaiuheaiuhea

Abraços, continue com esses posts hein, estou indicando para uma galera!

Allan Escreveu um comentário on August 10, 2007

Muito bom seu script rodrigo,
Sempre mandando bem hein! =D

Então,
Férias de volta ??
AIEUhiUAEHi..
que folgaaa hein.. hahah

Grande Abraço!

Junior Escreveu um comentário on August 10, 2007

Muito bom script, 10!

LastOne Escreveu um comentário on August 15, 2007

Ern, pq nao acho o codigo? o.@

Rennis Sousa Escreveu um comentário on August 16, 2007

O codigo não está disponivel??
Está show

Rodrigo Fante Escreveu um comentário on August 16, 2007

Entao, o codigo ta ali, vcs clicaram em tabela dinamica 1.0.0
deve abrir essa pagina:

http://www.fazedordesite.com/exemplos/tabeladinamica

la dentro tem escrito DOWNLOAD em azul a direita ou abaixo da tabela dependendo da sua resoluçao, qualquer duvida é soh dizer.

Abraço

Rodrigo Fante Escreveu um comentário on August 16, 2007

Acho que vcs estavam confundindo por causa dos anuncios do Google que tem junto, ja dei maior destaque, como disse, qualquer coisa eh soh berrrar :D

Rennis Sousa Escreveu um comentário on August 23, 2007

=D
achei … abrcs
mto bom

Nayara Escreveu um comentário on October 3, 2007

Oi Rodrigo, tudo bem?

Achei ótimo seu post, era o que eu estava precisando …

Só que estou com um pequeno probleminha …

Além de pegar os valores de campos text eu preciso pegar o valor de um campo combobox … não sei como fazer … Será que pode me ajudar?

Sara Escreveu um comentário on December 7, 2007

ja descobri:))..e compativel a 100% com IE e firefox

zmnahgzmna Escreveu um comentário on April 30, 2008
mjunkvenyd Escreveu um comentário on May 2, 2008
snehelslaz Escreveu um comentário on May 2, 2008
rqpedorchu Escreveu um comentário on May 3, 2008
nqdclulqbu Escreveu um comentário on May 10, 2008
aduzihwnuz Escreveu um comentário on May 10, 2008
kallong Escreveu um comentário on August 4, 2008

boas, será que alguem podia arranjar esse exemplo com a parte do ajax, é que precisava de manter a tabela sem esta fazer reset da proxima vez que acedesse ao site com este script, se alguem poder ajudar com urgencia agradecia

Sabino Diego Escreveu um comentário on October 22, 2008

Bom dia Rodrigo, muito bom esse seu código. (tabela dinâmica 1.01)

Sou novato na área, estagiário a 2 semanas em uma empresa para desenvolver sites, e minha última missão antes do treinamento que eles vão me oferecer é fazer justamente oque você fez, só que com mais colunas, ou seja além de id, nome, sexo tenho que colocar data de aniversário e hobby, tentei modificar seu código para que eu possa superar meu desafio.
Infelizmente ainda não obtive sucesso.
Consegui mostrar embaixo da tela as novas colunas tudo certinho.(simples tbm).
Consegui criar os novos forms e quando apertar o botao ele pegar todos os valores certinhos(isso seu código fez sozinho).

A única coisa que tive que alterar é para que quando chamasse a função tabela.insere mandei junto o hobby e a data. Na funcao insere coloquei lá o hobby e a data para receberem!
Testei usando alerts para ver se os valores estavam chegando lá e sim eles chegam tudo certinho.

dae lá tem a parte para definir as variaveis colunas neh.
já tinha 4 colunas do seu código.
oque eu fiz foi inserir duas a mais fazendo do mesmo jeito que as outras somente alterando os nomes e os numeros das colunas em ordem crescente.(0.1.2.3.4.5)

dae depois, embaixo disso, ainda dentro do insere tem lá para eu atribuir um valor para a coluna tal.
fiz da mesma maneira que seu código.
Porém infelizmente não funciona!
Quando eu consegui fazer tudo certinho não dando erro nenhum oque acontece é que somente mostra os valores do ID, Nome e Sexo a data e o hobby ficam em branco.

Primeiro pensei que os valores nao estavam chegando lá. O teste que fiz foi somente trocar a variavel a ser impressa no Id ou no nome ou sexo para data ou hobby e elas apareceram!

Ou seja, não sei oque fazer? se você tiver como me ajudar, ou me dar um toque dizer oque posso estar errando ou se o codigo que voce fez so mostra mesmo 3 variaveis, que tenho q alterar algo para q isso funcione.

Bom desculpe o incomodo.
Se possivel responda. Se não tbm :D pelo menos avisando para mim não ficar esperando. Vou continuar buscando informações por conta por enquanto. Aguardo sua resposta.

Muito obrigado pela atenção.

Boa semana.

Sabino Diego Escreveu um comentário on October 22, 2008

Oi, como faço para inserir mais duas colunas??
esse é o único problema.

no seu código está assim:
var colunaId = linha.insertCell(0); // Insere a coluna Id
var colunaNome = linha.insertCell(1); // Insere a coluna Nome
var colunaSexo = linha.insertCell(2); // Insere a coluna Sexo
var colunaCancelar = linha.insertCell(3); // Insere a coluna Cancelar

dae assim cria as colunas! certo?
para atribuir valores as colunas você fez:

colunaId.innerHTML=id;
colunaNome.innerHTML=nome;
colunaSexo.innerHTML=sexo;

O que eu fiz foi o seguinte!

var colunaId = linha.insertCell(0); // Insere a coluna Id
var colunaNome = linha.insertCell(1); // Insere a coluna Nome
var colunaSexo = linha.insertCell(2); // Insere a coluna Sexo
* var colunaData = linha.insertCell(3); // Insere a coluna Data
* var colunaHobby = linha.insertCell(4); // Insere a coluna Hobby
var colunaCancelar = linha.insertCell(-1); // Insere a coluna Cancelar

para atribuir valores as colunas mantive oque voce fez e só coloquei as novas colunas.

colunaData.innerHTML=data;
colunaHobby.innerHTML=hobby;

só que oque acontece é que dá um erro ali quando eu declaro a colunaData. Acho que o problema é que eu não posso ter mais de 4 colunas já contando com a do cancelar!
será isso?

procurei no código porém não achei nada que delimita a quantidade máxima de colunas.

Se alguém puder ajudar eu agradeço.!

Muito obrigado desde já!

Boa semana para todos.

S.R.N.

Diego Escreveu um comentário on December 2, 2008

Rodrigo, estou tentando colocar mais de uma tabela dinâmica numa mesma tela, mas to apanhando um pouco, pois o nome da tabela é sempre dynamic_table, tento passar por parametro o nome da tabela pra algumas coisas pra o adicionarEvento(window, “load”, inicia); complica um pouco pois não posso passar o nome da tabela para a função inicia().
Você sabe alguma forma fácil de colocar mais de uma tabela dinamica na mesma tela ?

O código é mto bom.

Obrigado,

Diego

Comenta ae..


Assine meus Feeds


Sobre/Contato

scripts