Informática Numaboa - Tutoriais e Programação
jQuery - Tabelas listradas
|
Ter 2 Dez 2008 11:12 |
- Detalhes
- Categoria: Javascript
- Atualização: Sexta, 17 Setembro 2010 18:36
- Autor: vovó Vicki
- Acessos: 14534
Criando objetos jQuery
Como sempre, para que possamos acessar a biblioteca jQuery, ela precisa ser incorporada à(s) página(s). Altere o caminho para a biblioteca de acordo com o diretório onde você escolheu colocá-la.
Agora chegou a hora de pedir para a biblioteca trabalhar para nós. Se você ainda não sabe, $ é um alias para a classe jQuery e $( ) constrói um novo objeto jQuery. Este objeto tem informação que não acaba mais. Por exemplo, se precisarmos mexer em todos (ou alguns, dependendo do caso) parágrafos de um documento HTML, chamamos a jQuery com o seletor "p" para obter todos os elementos p do documento: $("p"). A mesma coisa pode ser feita com qualquer elemento do DOM.
De posse do(s) elemento(s), podemos acionar métodos (funções) da classe jQuery relacionadas a ele. Vou dar um exemplo mais claro usando o elemento a. Na forma tradicional escreveríamos o seguinte:
Neste caso criamos o elemento a, definimos para este elemento um evento onclick que, quando ocorrer, dispara uma mensagem de alerta. Podemos obter exatamente a mesma coisa usando a biblioteca jQuery com:
Neste exemplo a seqüência é a seguinte: obtemos um objeto jQuery com $( ), que nos traz o elemento document. Chamamos o método (ou função) ready (pronto) deste elemento com $(document).ready( ). Esta função nos indica quando o DOM for completado. Assim que isto ocorrer, acionamos uma nova função com function(), que é definida logo a seguir com a requisição de um novo objeto jQuery, desta vez solicitando todos os elementos a. Usamos um dos métodos do elemento a, a função click( ). Este método define um evento onclick. Finalmente definimos uma função para quando este evento ocorrer novamente com function() e especificamos que deve ser dado um alert("Olá. Você me clicou!").
Primeira diferença: na forma tradicional, apenas o link com onclick dará a mensagem quando for clicado; com a jQuery, todos os links do documento darão a mensagem quando forem clicados. Segunda diferença: o código para a jQuery parece muito mais complicado. Até concordo com isto, mas quando foi que, começando a tomar contato com alguma coisa nova, tudo não parecia mais complicado? E quando foi que, depois de se acostumar com as novidades, as coisas se tornaram muito simples? Comigo sempre foi (e ainda é) assim :smile:
Classificando elementos
Já vimos que, ao criar um objeto com "p" ou "a", temos acesso a todos os que existirem no documento. Como nosso objetivo é fazer com que determinadas tabelas sejam listradas, não todas elas, vamos precisar identificar as que devem receber um tratamento diferenciado. Podemos identificar elementos usando classes ou ids. Se criarmos uma tabela com id="zebra", apenas uma tabela deste tipo poderá existir no documento; se criarmos várias tabelas com class="zebra", todas elas podem conviver pacificamente no mesmo documento. Para deixar o código mais flexível, vamos criar a classe dentro de um estilo:
| Título 1 | Título 2 |
|---|---|
| Texto 1 | Texto 2 |
| Texto 1 | Texto 2 |
| Texto 1 | Texto 2 |
| Texto 1 | Texto 2 |
Com esta folha de estilo definimos que as tabelas desta classe terão as bordas colapsadas (melhora o visual), que seus elementos th tenham letras brancas sobre fundo azul escuro e que seus elementos td (aninhados em elementos tr) tenham a margem inferior de 1 pixel também em azul. Teste seu script CSS e veja se o resultado é o mesmo que você está vendo ao lado.
Agora vem o pulo do gato com a jQuery. Vamos capturar todos os elementos tr de tabelas da classe zebra e adicionar uma classe a eles. Podemos chamá-la de alt, abreviação de alternado. Para que esta classe possa ser atribuída aos elementos desejados, ela também precisa ser definida no CSS:
Tudo preparado, vamos fazer com que a jQuery comece a trabalhar para nós. Ainda dentro da área <head> da nossa página, logo abaixo da folha de estilo, adicione o seguinte script:
| Título 1 | Título 2 |
|---|---|
| Texto 1 | Texto 2 |
| Texto 1 | Texto 2 |
| Texto 1 | Texto 2 |
| Texto 1 | Texto 2 |
Se tudo funcionar como o previsto, até já sabemos o que deve acontecer: assim que o DOM estiver pronto, todos os elementos tr de todas as tabelas da classe zebra receberão a classe alt. Como esta classe já foi definida, sabemos que todas as linhas destas tabelas terão um fundo azul. Veja como ficou na tabela ao lado.
Peraí! Mas não é isto o que queremos. As linhas deveriam ter cores alternadas! Novamente é uma coisa fácil de resolver. Se você quiser que os tr das linhas pares sejam classificados, use even (par, em inglês); se quiser que isto aconteça com as linhas ímpares, use odd (ímpar em inglês). O código jQuery muda só um pouquinho e o resultado é o desejado
| Título 1 | Título 2 |
|---|---|
| Texto 1 | Texto 2 |
| Texto 1 | Texto 2 |
| Texto 1 | Texto 2 |
| Texto 1 | Texto 2 |