如何使用jquery遍历php回显的表行并选择满足属性的特定行

Question

I have a table dynamically created from a Mysql database. I am trying to create a modal dialog whereby if a user clicks on the view button a pop-up is displayed showing the values of that specific row. How do I loop through the table and select a specific row using jquery? I am using a Javascript library called bootbox.js I am able to display the pop-up however I cant get it to display the relevant row, it instead displays only the first row. The relevant PHP and the Javascript code I tried is shown below

echo "<table class='table table-hover table-responsive table-bordered'>";
    echo "<tr>";
        echo "<th>Payment Supplier</th>";
        echo "<th>Payment Reference</th>";
        echo "<th>Payment Cost rating</th>";
        echo "<th>Payment Amount</th>";
        echo "<th>Actions</th>";
    echo "</tr>";

    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){

        extract($row);

        echo "<tr>";

            echo "<td>{$payment_supplier}</td>";
            echo "<td>{$payment_ref}</td>";
            echo "<td>{$payment_cost_rating}</td>";
            echo "<td>{$payment_amount}</td>";
            ?>
            <div id="dom-target" style="display: none;">
                <?php 
                $output = $payment_supplier; //Again, do some operation, get the output.
                echo htmlspecialchars($output); /* You have to escape because the result
                                       will not be valid HTML otherwise. */
                ?>

                </div>
                <?php
            echo "<td>"; 

                echo "<a view-id='{$payment_id}' class='btn btn-default view-object'>View</a>";
                echo "<a href='lib/Local/update_payment.php?id={$payment_id}' class='btn btn-default left-margin'>Edit</a>";
                echo "<a delete-id='{$payment_id}' class='btn btn-default delete-object'>Delete</a></div>";
            echo "</td>";

        echo "</tr>";

        $x++;
    }

echo "</table>";

The Javascript code is

<script>
$(document).on('click', '.view-object', function(e) {

        var div = document.getElementById("dom-target");
        var myData = div.textContent;

        bootbox.alert(myData, function() {
            console.log("Alert Callback");
        });
    });
</script>

What am I missing here or is there a better way to achieve this?

Answer 1

As you had told , your code displays only the first row.

This is because you have not set different unique id to each row div to show on click of view.

Try using the code as :

    echo "<table class='table table-hover table-responsive table-bordered'>";
            echo "<tr>";
                echo "<th>Payment Supplier</th>";
                echo "<th>Payment Reference</th>";
                echo "<th>Payment Cost rating</th>";
                echo "<th>Payment Amount</th>";
                echo "<th>Actions</th>";
            echo "</tr>";

            while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){

                extract($row);

                echo "<tr>";

                    echo "<td>{$payment_supplier}</td>";
                    echo "<td>{$payment_ref}</td>";
                    echo "<td>{$payment_cost_rating}</td>";
                    echo "<td>{$payment_amount}</td>";

                    //SET THE UNIQUE ID OF DIV TO SHOW ON CLICK OF VIEW//
                    ?>
                    <div id="dom-target-<?php echo $payment_id;?>" style="display: none;">
                        <?php 
                        $output = $payment_supplier; //Again, do some operation, get the output.
                        echo htmlspecialchars($output); /* You have to escape because the result
                                               will not be valid HTML otherwise. */
                        ?>

                        </div>
                        <?php
                    echo "<td>"; 

                        echo "<a view-id='{$payment_id}' class='btn btn-default view-object'>View</a>";
                        echo "<a href='lib/Local/update_payment.php?id={$payment_id}' class='btn btn-default left-margin'>Edit</a>";
                        echo "<a delete-id='{$payment_id}' class='btn btn-default delete-object'>Delete</a></div>";
                    echo "</td>";

                echo "</tr>";

                $x++;
            }

        echo "</table>";

JS :

        <script>
        $(document).on('click', '.view-object', function(e) {

                selectedId=$(this).attr('view-id');         //GET SELECTED ROW ID FROM ANCHOR TAG

                var div = document.getElementById("dom-target-"+selectedId);        //CALL THE SELECTED ROW DIV TO POP UP
                var myData = div.textContent;

                bootbox.alert(myData, function() {
                    console.log("Alert Callback");
                });
            });
        </script>

This may helps you.

Answer 2

try this...

<script>
$(document).on('click', '.view-object', function(e) {

        bootbox.alert($(this).val(), function() {
        console.log("Alert Callback");
    });
});
</script>

Answer 3

There are two main problems with your script:

1. You are recycling the dom-target ID. Remember that IDs have to be unique in your HTML document. You can change it from ID to a class instead.
2. <div> is not a valid child of <tr> . Browsers will attempt to fix this, which might involve the element being removed from the table, or sequestered in a <td> .
3. Your function lacks context — when .view-object is clicked on, you need to reference to the current element where the event originated from. Using $(this) will point you in the right direction.

I suggest that you store the value in dom-output as a HTML5 data- attribute associated with the specific row, ie, instead of:

    echo "<tr>";

        echo "<td>{$payment_supplier}</td>";
        echo "<td>{$payment_ref}</td>";
        echo "<td>{$payment_cost_rating}</td>";
        echo "<td>{$payment_amount}</td>";
        ?>
        <div id="dom-target" style="display: none;">
            <?php 
            $output = $payment_supplier; //Again, do some operation, get the output.
            echo htmlspecialchars($output); /* You have to escape because the result
                                   will not be valid HTML otherwise. */
            ?>

            </div>

use:

    echo "<tr data-domtarget='".htmlspecialchars($payment_supplier)."'>";

        echo "<td>{$payment_supplier}</td>";
        echo "<td>{$payment_ref}</td>";
        echo "<td>{$payment_cost_rating}</td>";
        echo "<td>{$payment_amount}</td>";
        ?>

You can use the following script:

$(document).on('click', '.view-object', function() {
    var domTarget = $(this).closest('tr').data('domtarget');
    bootbox.alert(domTarget, function() {
        console.log("Alert Callback");
    });
});