DOM & Javascript 10 Aug 2007 09:26 am
Tabela Dinâmica com javascript
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 
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:
on 10 Aug 2007 at 11:46 am 1.Victor de Souza Couto escreveu …
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!
on 10 Aug 2007 at 4:24 pm 2.Allan escreveu …
Muito bom seu script rodrigo,
Sempre mandando bem hein! =D
Então,
Férias de volta ??
AIEUhiUAEHi..
que folgaaa hein.. hahah
Grande Abraço!
on 10 Aug 2007 at 7:13 pm 3.Junior escreveu …
Muito bom script, 10!
on 15 Aug 2007 at 10:15 pm 4.LastOne escreveu …
Ern, pq nao acho o codigo? o.@
on 16 Aug 2007 at 1:56 pm 5.Rennis Sousa escreveu …
O codigo não está disponivel??
Está show
on 16 Aug 2007 at 2:37 pm 6.Rodrigo Fante escreveu …
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
on 16 Aug 2007 at 2:54 pm 7.Rodrigo Fante escreveu …
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
on 23 Aug 2007 at 11:24 am 8.Rennis Sousa escreveu …
=D
achei … abrcs
mto bom
on 03 Oct 2007 at 4:45 pm 9.Nayara escreveu …
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?
on 07 Dec 2007 at 1:02 pm 10.Sara escreveu …
ja descobri:))..e compativel a 100% com IE e firefox
on 30 Apr 2008 at 6:52 pm 11.zmnahgzmna escreveu …
large scale slot cars
on 02 May 2008 at 4:42 am 12.mjunkvenyd escreveu …
tits at school
on 02 May 2008 at 9:51 pm 13.snehelslaz escreveu …
tvs financial advisers
on 03 May 2008 at 7:29 am 14.rqpedorchu escreveu …
network specialists raleigh nc
on 10 May 2008 at 9:20 am 15.nqdclulqbu escreveu …
roulette
on 10 May 2008 at 11:21 am 16.aduzihwnuz escreveu …
call of duty cassino
on 04 Aug 2008 at 8:41 am 17.kallong escreveu …
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
on 22 Oct 2008 at 10:45 am 18.Sabino Diego escreveu …
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.
on 22 Oct 2008 at 1:59 pm 19.Sabino Diego escreveu …
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.