3

Tenho a seguinte tabela que é construída a partir de um entidade do banco de dados.

HTML:

<table class="table table-hover" id="produtostab">
            <thead>
                <tr>
                    <th>Descrição</th>
                    <th>Quantidade</th>
                    <th>Selecionar</th>
                </tr>
            </thead>
            <tbody id="myTable">
                <?php
                    $conn = new mysqli('localhost', 'root', '', 'exemplo') or die ('Falha ao conectar-se com DB');
                    mysqli_query($conn, "SET NAMES 'UTF8'") or die("ERROR: ". mysqli_error($con));
                    $result = $conn->query("select idProduto, Descricao from produto");
                    while ($row = $result->fetch_assoc()) {
                        unset($idProduto, $Descricao);
                        $idProduto = $row['idProduto'];
                        $Descricao = $row['Descricao'];
                        echo '<tr>'; 
                        echo '<td>'.$Descricao.'</td>';
                        echo '<td contenteditable="true"></td>';
                        echo '<td><input type="checkbox"></td>';
                        echo '</tr>';
                    }
                    ?>
            </tbody>
    </table>

Em cada row (linha) da tabela, há um checkbox. Preciso que, após apertar um botão de envio, o conteúdo de todas as rows que forem checadas (a partir do checkbox) sejam armazenadas em um array PHP para ser consultada depois. Como poderia fazer isso? Nem sei se é possível, se não for, existe outra maneira de obter os valores destas rows checadas?

1 Resposta 1

6

Não sei se é melhor ou se é o caso, mas pensei em uma solução com jQuery

$(document).ready(function(){
    var total = [];
    $("tr").each(function(){
        total.push("");
    });

    $("input").click(function(){    
        var index = $(this).closest("tr").index();
        if($(this).prop('checked')){
            total[index] = $(this).parent().parent().find("td:first-of-type").text();
            $(".result").html(total);
        } else {
            total[index] = "";    
            $(".result").html(total);        
        }
    });
 });

Primeiro eu crio o array e adiciono uma entrada para cada linha da tabela. Faço isso para poder manipular essas entradas depois.

Estou fazendo no click do checkbox, mas claro que você deve mudar conforme achar necessário para melhorar a usabilidade.

Quando tem o click do checkbox, ele verifica qual o número desta linha da tabela e armazena na variável index. Então ele vê se o checkbox está checkado ou não.

Se sim, ele adiciona o valor no mesmo ponto do array da linha em questão (por isso precisava criar tudo antes). Se não, ele deixa em branco. Tentei usar .push e .split, mas aí o array muda de tamanho e eu perco a referência da linha da tabela.

Exemplo: http://jsfiddle.net/cb05p55z/

5
  • Obrigado, é exatamente isso que eu preciso. Eu só precisei remover o first-of-type, pois se não ele não iria capturar o valor da segunda <td>, onde no seu exemplo fica o Valor 1, Valor 2, etc. Funcionou perfeitamente. Commented 21/08/2014 às 19:28
  • Sim, você pode usar td:eq(0) e td:eq(1).
    – Marta
    Commented 21/08/2014 às 19:32
  • Além disso imagino que foi necessária outra abordagem que não simplesmente jogar os valores noutro elemento, como concatenar os ados numa string, criar um JSON... E AJAX, claro, para passar os dados do cliente para o servidor. Commented 21/08/2014 às 19:50
  • Ao invés de passar os valores para uma <div>, é possível passá-los para o value de um campo <input>? Commented 26/08/2014 às 16:57
  • É só colocar um <input id="campo" name="campo"> e $(".campo").val(total)
    – Marta
    Commented 26/08/2014 às 17:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .