Tabela Dinâmica com javascript
August 10, 2007 9:26 amBom 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 ![]()
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:






Não me faça pensar
Ipod
Monitor LCD
Notebook
Celular
20 Comentários para “Tabela Dinâmica com javascript”
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!
Muito bom seu script rodrigo,
Sempre mandando bem hein! =D
Então,
Férias de volta ??
AIEUhiUAEHi..
que folgaaa hein.. hahah
Grande Abraço!
Muito bom script, 10!
Ern, pq nao acho o codigo? o.@
O codigo não está disponivel??
Está show
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
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
achei … abrcs
mto bom
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?
ja descobri:))..e compativel a 100% com IE e firefox
large scale slot cars
tits at school
tvs financial advisers
network specialists raleigh nc
roulette
call of duty cassino
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
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.
pelo menos avisando para mim não ficar esperando. Vou continuar buscando informações por conta por enquanto. Aguardo sua resposta.
Se possivel responda. Se não tbm
Muito obrigado pela atenção.
Boa semana.
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.
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..