Tabela e jquery

Guga01 · Março 18, 2011

Olá pessoal!

Estou fazendo algumas funcionalidades para uma tabela em jquery. A maioria está funcionando, mas quando clico no checkbox de uma linha, ele não fica "checado". Alguém poderia me ajudar? Obrigado.

O código da tabela e das funções em jquery estão abaixo:

Tabela

<table id='minhaTabela' cellspacing='0' summary='Tabela de planos'>
<caption>Tabela 01: Planos</caption>
<thead>
	<tr>
		<th scope='col' abbr=''>
			<input type='checkbox' id='todosCheckbox' />
		</th>
		<th scope='col' abbr='Nome' class='nobg'>Nome</th>
		<th scope='col' abbr='Total de créditos'>Total de Créditos</th>
		<th scope='col' abbr='Valor'>Valor</th>
	</tr>
</thead>
<tbody>
	<div id='dadosTabela'>
		<tr class='linhaTipoA'>
			<td class='colunaCheckBox'>
				<input type='checkbox' id='000000001' />
			</td>
			<td>
				Plano Básico
			</td>
			<td class='colunaCreditos'>
				0020
			</td>
			<td class='colunaValor'>
				50,00
			</td>
		</tr>
		<tr class='linhaTipoB'>
			<td class='colunaCheckBox'>
				<input type='checkbox' id='000000002' />
			</td>
			<td>
				Plano Intermediário
			</td>
			<td class='colunaCreditos'>
				0050
			</td>
			<td class='colunaValor'>
				100,00
			</td>
		</tr>
		<tr class='linhaTipoA'>
			<td class='colunaCheckBox'>
				<input type='checkbox' id='000000003' />
			</td>
			<td>
				Plano Completo
			</td>
			<td class='colunaCreditos'>
				0100
			</td>
			<td class='colunaValor'>
				200,00
			</td>
		</tr>
</tbody>
</table>
<div id='rodapeTabela'>
<div id='totaisDaTabela'>Total de planos: <span class='destaque'>3</span></div> <!-- Fim da div totaisDaTabela -->
<div id='paginacao'>paginação</div> <!-- Fim da div paginacao -->
</div> <!-- Fim da div rodapeTabela -->
</div> <!-- Fim da div dadosTabela -->

E o código Jquery

$(document).ready(function(){
$('table tbody tr').mouseover(function() {
	$(this).addClass('linhaSelecionada');
}).mouseout(function() {
	$(this).removeClass('linhaSelecionada');
}).click(function() {
	var classeExiste = $(this).hasClass('linhaSelecionada2');

	if (classeExiste)
		$(this).removeClass('linhaSelecionada2');
	else
		$(this).addClass('linhaSelecionada2');

	var itemSelecionado = $(this).find('td').find('input').is(':checked');

	if (itemSelecionado)
		$(this).find('td').find('input').attr('checked', false);
	else
		$(this).find('td').find('input').attr('checked', true);
});


// selecionar e deselecionar todas as linhas da tabela
$('#todosCheckbox').click(function() {

	var status = $(this).attr('checked');

	$('table tbody tr').find('td').find('input').each(function() {
		$('table tbody tr').find('td').find('input').attr('checked', status);

		if (status)
			$('table tbody tr').addClass('linhaSelecionada2');
		else
			$('table tbody tr').removeClass('linhaSelecionada2');
	});

});


// clicar no checkbox de uma linha da tabela
$('input[type=checkbox]').click(function() {

	var status = $(this).attr('checked');		
	var id = $(this).attr('id');

	$('table tbody tr').find('td').find('input').each(function() {
		var identificacao = $(this).attr('id');

		if (identificacao == id)
		{
			$(this).addClass('linhaSelecionada2');
			$(this).attr('checked', status);
		}
		else
			$(this).removeClass('linhaSelecionada2');
	});

});
});

William Bruno · Março 18, 2011

desnecessária essa linha

$(this).attr('checked', status);

apenas remova ela.

Guga01 · Março 18, 2011

desnecessária essa linha
$(this).attr('checked', status);
apenas remova ela.

Olá William!

Removi a linha que você disse. Coloquei um alert para informar quando clico no checkbox. Ele fica "checado", mas logo em seguida perde o check. Então, percebi que o conflito está na seguinte parte do código:

var itemSelecionado = $(this).find('td').find('input').is(':checked');

if (itemSelecionado)
	$(this).find('td').find('input').attr('checked', false);
else
	$(this).find('td').find('input').attr('checked', true);

Quando retiro esta parte, ele não perde o check. Mas, em compensação, se o usuário clica em qualquer parte da linha, o checkbox fica sem a seleção. Como resolver isso?

William Bruno · Março 18, 2011

todo esse trecho é desnecessário.

remova ele, e o outro que informei, teste

e poste o código novamente para análise.

Guga01 · Março 19, 2011

Olá William!

Eu andei reformulando o meu código e, por isso, estou recolocando aqui pois quando clico em um checkbox para selecionar a linha, a idéia era que essa linha toda ficasse destacada das demais, mas isso não está ocorrendo. Além disso, para facilitar para o usuário, eu queria poder clicar em qualquer área da linha para marcá-la ou desmarcá-la. Se você puder executar o código, verá o que ocorre e, talvez, possa entender sobre o problema.

Outra coisa: agora os dados da tabela e a paginação são recarregados dentro da div dadosTabela. Como faço para que o número da página atual fique destacada na paginação? Com o código que tenho, ele (número da página) ficava destacado quando não era atualizado junto com os dados da tabela.

A api live, pelo que sei, só pode ser usado com eventos e não com o css.

código html:

<?php
// função que lista todos os planos
function listaPlanos()
{
 global $itensPagina;

 $sqlPlanos = "SELECT * FROM planos ORDER BY id_planos ASC";
 $resPlanos = mysql_query($sqlPlanos) or die("Erro: " . mysql_error());
 $totalPlanosTemp = mysql_num_rows($resPlanos);

 $totalPaginas = ceil($totalPlanosTemp / $itensPagina);

 $totalPlanos = number_format($totalPlanosTemp, 0, '', '.');
 if ($totalPlanosTemp == 0)
 {
   echo "Não existem planos cadastrados!";
 }
 else
 {
   echo "<div id='dadosTabela'>";
   echo "</div> <!-- Fim da div dadosTabela -->";
 }
}
?>

código jquery:

$(document).ready(function(){

// efeitos da tabela
$('table tbody tr').live('mouseover', function() {
 $(this).addClass('linhaSelecionada');
}).live('mouseout', function() {
 $(this).removeClass('linhaSelecionada');
});

// selecionar e deselecionar todas as linhas da tabela
$('#todosCheckbox').live('click', function() {
 var status = $(this).attr('checked');

 $('table tbody tr').find('td').find('input').each(function() {
   $('table tbody tr').find('td').find('input').attr('checked', status);

   if (status)
     $('table tbody tr').addClass('linhaSelecionada2');
   else
     $('table tbody tr').removeClass('linhaSelecionada2');
 });
});


// clicar no checkbox de uma linha da tabela
$('.celulaCheckBox').live('click', function() {

 var id = $(this).attr('id');

 $('table tbody tr').find('td').find('input').each(function() {
   var identificacao = $(this).attr('id');

   if (identificacao == id)
     $('table tbody tr').addClass('linhaSelecionada2');
   else
     $('table tbody tr').removeClass('linhaSelecionada2');
 });
});
// fim dos efeitos da tabela

// paginação da tabela
$("#paginacao li a").live('click', function(){
 //mostraProcessando();
 $("#paginacao li a").css({'background-color' : '', 'color' : '#525252', 'cursor' : 'pointer'});
 $(this).css({'background-color' : '#525252', 'color' : '#FFF'});
 //$("#dadosTabela").load("tabela.php?pagina=" + this.id, escondeProcessando());
 $("#dadosTabela").load("tabela.php?tipo=planos&pagina=" + this.id);		
 return false;
});

$("#1").css({'background-color' : '#525252', 'color' : '#FFF'});
//mostraProcessando();
//$("#dadosTabela").load("tabela.php?pagina=1", escondeProcessando());
$("#dadosTabela").load("tabela.php?tipo=planos&pagina=1");

});

E o código da tabela.php:

<?php
include_once "includes/verifica.php";
include_once "includes/config.php";

$tipo = $_REQUEST['tipo'];
$pagina = $_REQUEST['pagina'];
$inicio = ($pagina - 1) * $itensPagina;

if ($tipo == 'planos')
{
	$sqlPlanos = "SELECT * FROM planos ORDER BY id_planos ASC";
	$resPlanos = mysql_query($sqlPlanos) or die("Erro: " . mysql_error());
	$totalPlanosTemp = mysql_num_rows($resPlanos);

	$totalPaginas = ceil($totalPlanosTemp / $itensPagina);

	$totalPlanos = number_format($totalPlanosTemp, 0, '', '.');

	$sqlListaPlanos = "SELECT * FROM planos ORDER BY id_planos ASC LIMIT $inicio, $itensPagina";
	$resListaPlanos = mysql_query($sqlListaPlanos) or die("Erro: " . mysql_error());
	$totalListaPlanos = mysql_num_rows($resListaPlanos);
	if ($totalListaPlanos > 0)
	{
		echo "<table id='minhaTabela' cellspacing='0' summary='Tabela de planos'>";
		echo "<caption>Tabela 01: Planos</caption>";
		echo "<thead>";
		echo "<tr>";
		echo "<th scope='col' abbr=''><input type='checkbox' id='todosCheckbox' /></th>";
		echo "<th scope='col' abbr='Nome' class='nobg'>Nome</th>";
		echo "<th scope='col' abbr='Total de créditos'>Total de Créditos</th>";
		echo "<th scope='col' abbr='Valor'>Valor</th>";
		echo "</tr>";
		echo "</thead>";
		echo "<tbody>";

		$linha = 1;
		while ($lnListaPlanos = mysql_fetch_assoc($resListaPlanos))
		{
			$idPlano = $lnListaPlanos['id_planos'];
			$nomePlano = htmlentities($lnListaPlanos['nome']);
			$totalCreditos = $lnListaPlanos['totalCreditos'];
			$valor = $lnListaPlanos['valor'];
			$valorF = number_format($valor, 2, ',', '.');

			$parImpar = ($linha % 2) ? 1 : 2;

			if ($parImpar == 1)
				echo "<tr class='linhaTipoA'>";
			else
				echo "<tr class='linhaTipoB'>";
			echo "<td class='colunaCheckBox'><input type='checkbox' id='" . $idPlano . "' class='celulaCheckBox' /></td>";
			echo "<td>" . $nomePlano . "</td>";
			echo "<td class='colunaCreditos'>" . $totalCreditos . "</td>";
			echo "<td class='colunaValor'>" . $valorF . "</td>";											
			echo "</tr>";

			$linha++;
		}
		// liberação de memória
		mysql_free_result($resListaPlanos);

		echo "</tbody>";
		echo "</table>";

		echo "<div id='rodapeTabela'>";

		echo "<div id='totaisDaTabela'>";
		echo "Total de planos: <span class='destaque'>" . $totalPlanos . "</span>";
		echo "</div> <!-- Fim da div totaisDaTabela -->";

		echo "<div id='paginacao'>";
		echo "<ul>";
		for ($i = 1; $i <= $totalPaginas; $i++)
			echo "<li><a href='#' id='" . $i . "'>" . $i . "</a></li>";
		echo "</ul>";
		echo "</div> <!-- Fim da div paginacao -->";

		echo "</div> <!-- Fim da div rodapeTabela -->";
	}
}

// fechar a conexão do banco de dados
mysql_close($conexaoBanco);
?>

Acima está todo o código que estou usando no momento. Espero que você possa me ajudar a solucionar os problemas. Obrigado!

William Bruno · Março 20, 2011

bacana cara.. você está indo bem, está tentando.. por isso vou te dar uma ajuda.

dá uma olhada aqui:

http://www.wbruno.com.br/blog/2011/03/20/selecionar-todos-checkb-ao-clicar-em-um-selecionar-check-ao-clicar-em-linha/

Entrar

Arquivado

Tabela e jquery

Recommended Posts

Guga01 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guga01 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guga01 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante