Get value from a <table> Row if checkbox is checked

Question

I have the following table which is built from a database entity.

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>

In each Row (row) of the table, there is a checkbox. I need that, after pressing a push button, the contents of all Rows that are checked (from the checkbox) are stored in a PHP array to be consulted later. How could I do that? I do not know if it is possible, if it is not, there is another way to get the values of these verified Rows?

Answer 1

I don’t know if it’s better or if it’s the case, but I thought of a solution with 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);        
        }
    });
 });

First I create the array and add an entry for each table row. I do this so I can manipulate these entries later.

I am doing the checkbox click, but of course you should change as you think necessary to improve usability.

When you click the checkbox, it checks the number of this table row and stores it in the index variable. Then he sees if the checkbox is checked or not.

If yes, it adds the value at the same point as the array of the line in question (so it needed to create everything first). If not, it leaves blank. I tried to use . push and . split, but then the array changes size and I lose the table row reference.

Example: http://jsfiddle.net/cb05p55z/