如何使用jquery遍歷php回顯的表行並選擇滿足屬性的特定行

Question

我有一個從Mysql數據庫動態創建的表。 我正在嘗試創建一個模式對話框，如果用戶單擊查看按鈕，則會顯示一個彈出窗口，顯示該特定行的值。 如何遍歷表並使用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。

嘗試將代碼用作：

    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>

這可能對您有幫助。

Answer 2

嘗試這個...

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

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

Answer 3

您的腳本有兩個主要問題：

1. 您正在回收dom-target ID。 請記住，ID在HTML文檔中必須唯一 。 您可以將其從ID更改為類。
2. <div>不是<tr>的有效子代。 瀏覽器將嘗試解決此問題，這可能涉及從表中刪除元素或將其隔離在<td> 。
3. 您的函數缺少上下文-單擊.view-object時，您需要引用事件起源的當前元素。 使用$(this)將為您指明正確的方向。

我建議您將值作為與特定行關聯的HTML5 data-屬性存儲在dom-output中，而不是：

    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>

采用：

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

您可以使用以下腳本：

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