usar jQuery nessa tabela
2 participantes
Página 1 de 1
usar jQuery nessa tabela
Galera, estou finalizando um detalhe aqui na tabela, é o seguinte, quando clicar no botão Finalizado a linha correspondente ao botão ficará verde o mesmo para quando clicar em cancelar ficará vermelho.
Vejam o código, essa é minha tabela:
E esse é o jquery que adiciona os botão, agora só me falta fazer o efeito
Vejam o código, essa é minha tabela:
- Código:
<table class="table table table-striped table table-bordered table table-hover" >
<caption>Controle dos pedidos</caption>
<thead>
<tr>
<th>#</th>
<th>Nome do Cliente</th>
<th>Nome do Produto</th>
<th>Quantidade</th>
</tr>
</thead>
<tbody>
<?php while($pedido = mysqli_fetch_assoc($resultado)) : ?>
<tr class="tabela">
<th scope="row"><?php echo $pedido['id']; ?></th>
<td><?php echo $pedido['nomeCliente']; ?></td>
<td><?php echo $pedido['nomeProduto'];?></td>
<td><?php echo $pedido['total'];?></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
E esse é o jquery que adiciona os botão, agora só me falta fazer o efeito
- Código:
$(document).ready(function () {
$('.tabela').each(function () {
var sHtml = '<div>' +
'<span class="finalizado btn btn-success">Finalizado</span>' +
'<span class="cancelado btn btn-danger">Cancelado</span>' +
'</div>';
$(this).append(sHtml);
});
});
Alex Habilidade- Moderadores
- Time Online : 286d 2h 8m 11s
Mensagens : 70
Data de inscrição : 30/11/2013
Localização : /root
Re: usar jQuery nessa tabela
Existem N possibilidades para se fazer isso.. Acho que a mais fácil e que você vai entender melhor seria essa
http://output.jsbin.com/hineyi
Não recomendo adicionar os botões via jQuery, porque não coloca direto no PHP?
Se quiser algo mais "enxuto" pode criar uma função personalizada e depois bindar ela nos seus elementos...
http://api.jquery.com/on/
http://api.jquery.com/trigger/
Mas claro que isso só é necessário se você adicionar os botões via jQuery, do contrário pode fazer a moda antiga...
http://output.jsbin.com/hineyi
Não recomendo adicionar os botões via jQuery, porque não coloca direto no PHP?
Se quiser algo mais "enxuto" pode criar uma função personalizada e depois bindar ela nos seus elementos...
http://api.jquery.com/on/
http://api.jquery.com/trigger/
Mas claro que isso só é necessário se você adicionar os botões via jQuery, do contrário pode fazer a moda antiga...
- Código:
$('.cancela').click(cancela);
Re: usar jQuery nessa tabela
Olá Wagh,
Eu coloquei os botões pelo HTML, veja:
Referente ao efeito, eu já tentei fazer dessa forma utilizando o click, porém quando eu clico em finalizado ele pinta toda a tabela, eu queria somente a linha em que o botão finalizado foi desparado.
Eu coloquei os botões pelo HTML, veja:
- Código:
<?php
$con = conecta();
$resultado = mysqli_query($con, 'SELECT * FROM registrarPedido');
if (!$resultado) {
echo 'Mysql Error: ' . mysqli_error($con);
exit;
}
?>
<table class="table table table-striped table table-bordered table table-hover" >
<caption>Controle dos pedidos</caption>
<thead>
<tr>
<th>#</th>
<th>Nome do Cliente</th>
<th>Nome do Produto</th>
<th>Quantidade</th>
</tr>
</thead>
<tbody>
<?php while($pedido = mysqli_fetch_assoc($resultado)) : ?>
<tr class="tabela">
<th scope="row"><?php echo $pedido['id']; ?></th>
<td><?php echo $pedido['nomeCliente']; ?></td>
<td><?php echo $pedido['nomeProduto'];?></td>
<td><?php echo $pedido['total'];?></td>
<td><span class="finalizado btn btn-success">Finalizado</span> <span class="cancelado btn btn-danger">Cancelado</span></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
Referente ao efeito, eu já tentei fazer dessa forma utilizando o click, porém quando eu clico em finalizado ele pinta toda a tabela, eu queria somente a linha em que o botão finalizado foi desparado.
Alex Habilidade- Moderadores
- Time Online : 286d 2h 8m 11s
Mensagens : 70
Data de inscrição : 30/11/2013
Localização : /root
Re: usar jQuery nessa tabela
Ah, mas ai ta fácil pia. Veja o exemplo:
http://output.jsbin.com/faqivo
Se quiser pode adicionar as estilizações manualmente, mas eu prefiro adicionar uma classe no CSS, mais fácil de dar manutenção mais tarde
http://output.jsbin.com/faqivo
Se quiser pode adicionar as estilizações manualmente, mas eu prefiro adicionar uma classe no CSS, mais fácil de dar manutenção mais tarde
Re: usar jQuery nessa tabela
Deu certo Wagh valew novamente!
Alex Habilidade- Moderadores
- Time Online : 286d 2h 8m 11s
Mensagens : 70
Data de inscrição : 30/11/2013
Localização : /root
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos