Selecionando itens de registros com Javascript

Jan 26, 2011 by Sergio Novelli    7 Comments    Posted under: JavaScript, MySQL, PHP

Salve, salve, queridos leitores e visitantes! Depois de um mês de férias, vamos voltar à ativa com novos posts e tutoriais. Demorei a voltar, mas garanto que valeu a pena, pois estou cheio de novas idéias e experiências para compartilhar com todos. Então, chega de “nhen-nhen-nhen” e vamos ao que interessa.

Vamos começar o ano com um tutorial bem interessante usando recursos de PHP, MySQL e JavaScript. Trata-se de como listar, selecionar e identificar um registro de banco de dados usando essas três linguagens básicas internet. Na verdade, este tutorial é uma sequência do tutorial escrito em novembro/2010, Filtros e buscas com php e mysql, o qual sugiro que leiam antes de dar continuidade a este.

A idéia é fazer a listagem dos registros existentes em uma tabela do banco de dados, colocando ao lado de cada linha (registro) um checkbox que fará a seleção do respectivo registro e permitirá executar ações como editar e excluir. Não vou entrar em detalhes de como fazer a listagem, pois isto já foi explicado no post citado acima. Vou apenas explicar o que alterei e adicionei, ok. Vamos lá.

O banco de dados é o mesmo do post que citei acima e não haverá modificações.

O PHP e o HTML também serão os mesmos com as seguintes modificações:

Em primeiro lugar, vamos fazer com que nossa tabela seja envolvida por um formulário, adicionando o seguinte código acima da linha 01:

<form name="grid" id="grid" action="" method="post">

* Detalhe importante: Retire o formulário do filtro que se encontra da linha 04 à 09. Caso deseje utilizá-la também, você pode colocá-lo em uma tabela acima dessa para não dar comflito, pois um formulário dentro de outro certamente vai dar problema.

O próximo passo é fechar o formulário abaixo da tag de fechamento da tabela, abaixo da linha 66

- Continuando com os ajustes, logo abaixo da linha 12, vamos inserir uma nova célula na tabela e em seu conteúdo haverá o checkbox que será responsável por marcar/desmarcar todos os demais checkboxes existentes no documento, ou seja, todos os registros vindos do banco de dados através de uma função javascript que é chamada sempre que marcado e desmarcado. Veja o código:

<td><input type="checkbox" name="marcatodos" id="marcatodos" value="" onClick="javascript:marcaTodos();" /></td>

- Abaixo da linha 56 será inserido também uma nova célula que se repetirá durante a execução do while responsável pela listagem dos registros. Essa célula também tem um checkbox cujo valor é o id do registro atual, ou que está sendo impresso pelo PHP. Assim, sempre que selecionar esse checkbox, automaticamente se está selecionando o registro o qual ele representa.

<td><input type="checkbox" name="checkbox" id="checkbox" value="< ? echo $rowCliente['id'];?/>" /></td>

Agora vamos ao javascript. O código abaixo pode ser colocado dentro da tag head da sua página da seguinte forma:

<script language="javascript">
function marcaTodos() {
var form = document.grid;
// se o checkbox é marcado, deve marcar todos os demais
if (form.selectall.checked == 1) {
for (i = 0; i < form.elements.length; i++) {
if (form.elements[i].type == "checkbox") {
form.elements[i].checked = 1;
}
}
}
// se o checkbox é desmarcado, deve desmarcar todos os demais
if (form.selectall.checked == 0) {
for (i = 0; i < form.elements.length; i++) {
if (form.elements[i].type == "checkbox") {
form.elements[i].checked = 0;
}
}
}
}
</script>

Colocarei o código acima dentro de um arquivo chamado script.js, salvo na mesma pasta do meu arquivo html principal e o chamarei dentro da tag head da minha página, através da linha abaixo:

<script type="text/javascript" src="script.js"></script>

Vamos às explicações: a função marcaTodos tem o objetivo de percorrer todo o documento html em busca dos elementos do tipo checkbox e marcá-los, caso o checkbox marcatodos esteja sendo marcado ou desmarcá-los caso ele esteja sendo desmarcado.

Bom, por enquanto é isto!

Espero que tenham gostado. Fiquem à vontade e deixem suas dúvidas, críticas e sugestões nos comentários.

Até o próximo post.