javascript - 如何使用jquery循环php回显的表行并选择满足属性的特定行

Question

我有一个从 Mysql 数据库动态创建的表。我正在尝试创建一个模式对话框，如果用户单击 View 按钮，则会显示一个弹出窗口，显示该特定行的值。如何使用 jquery 循环遍历表并选择特定行？我正在使用一个名为 bootbox.js 的 Javascript 库，我能够显示弹出窗口，但是我无法让它显示相关行，它只显示第一行。我尝试过的相关PHP和Javascript代码如下所示

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>";

Javascript代码是

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

我在这里缺少什么或者有更好的方法来实现这一点吗？

Answer 1

正如您所说，您的代码仅显示第一行。

这是因为您没有为每个行 div 设置不同的唯一 id 以在单击 View 时显示。

尝试使用代码:

    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>

这可能对你有帮助。