usar jQuery nessa tabela

Ir em baixo

usar jQuery nessa tabela Empty usar jQuery nessa tabela

Mensagem por Alex Habilidade em Sex 17 Jul 2015, 7:33 pm

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:
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
Alex Habilidade
Moderadores
Moderadores

Time Online : 286d 2h 8m 11s
Mensagens : 70
Data de inscrição : 30/11/2013
Localização : /root

Voltar ao Topo Ir em baixo

usar jQuery nessa tabela Empty Re: usar jQuery nessa tabela

Mensagem por waghcwb em Sex 17 Jul 2015, 7:55 pm

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...

Código:
$('.cancela').click(cancela);


The quieter you become, the more you are able to hear

usar jQuery nessa tabela Btn_viewmy_160x25_pt_BR



study
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

http://wagneraugusto.com.br/

Voltar ao Topo Ir em baixo

usar jQuery nessa tabela Empty Re: usar jQuery nessa tabela

Mensagem por Alex Habilidade em Sex 17 Jul 2015, 8:00 pm

Olá Wagh,

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
Alex Habilidade
Moderadores
Moderadores

Time Online : 286d 2h 8m 11s
Mensagens : 70
Data de inscrição : 30/11/2013
Localização : /root

Voltar ao Topo Ir em baixo

usar jQuery nessa tabela Empty Re: usar jQuery nessa tabela

Mensagem por waghcwb em Sex 17 Jul 2015, 8:08 pm

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 Like


The quieter you become, the more you are able to hear

usar jQuery nessa tabela Btn_viewmy_160x25_pt_BR



study
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

http://wagneraugusto.com.br/

Voltar ao Topo Ir em baixo

usar jQuery nessa tabela Empty Re: usar jQuery nessa tabela

Mensagem por Alex Habilidade em Sex 17 Jul 2015, 8:22 pm

Deu certo Wagh valew novamente!
Alex Habilidade
Alex Habilidade
Moderadores
Moderadores

Time Online : 286d 2h 8m 11s
Mensagens : 70
Data de inscrição : 30/11/2013
Localização : /root

Voltar ao Topo Ir em baixo

usar jQuery nessa tabela Empty Re: usar jQuery nessa tabela

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum