為什么我無法獲取 AJAX 中的表數據？ 每次我從表中獲取 req_id 時，它都會在 Console.log 中給我未定義的值

Question

我想獲取 req_id 但每次我從表中獲取 req_id 時，它都會在 Console.log() 中給我未定義。請在表數據 req_id 中查看，是的，數據庫連接正常，我可以看到值。我嘗試了 GET 和 POST 方法但我仍然得到同樣的錯誤。我想要的只是獲取 req_id 並將其顯示在 console.log 中作為定義的值

謝謝你

<!-- main  -->
<section class="pad-70">
    <div class="container">
        <p id="demo"></p>
        <?php
        $userQuery = $connection->Show($conobj, "requested_car");
        if ($userQuery->num_rows > 0) {
            echo "<table><tr><th>Req ID</th><th>Action</th></tr>";
            // output data of each row
            while ($row = $userQuery->fetch_assoc()) {
                echo "<tr ><td id=req_id>";
                echo (htmlentities($row['req_id']));
                echo ("</td><td>");
                echo ('<button onclick="confirmcar()" class="btn btn-lg btn-success">Confirm</button> <button onclick="MyAjaxFunc()" class="btn btn-lg btn-danger">Cancel</button>');
                echo ("</td></tr>\n");
            }
            echo "</table>";
        } else {
            echo "0 results";
        }
        $connection->CloseCon($conobj);
        ?>
    </div>
</section>
<!-- main  -->

<script>
function confirmcar() {

    var req_id = document.getElementById("req_id").value;
    console.log(req_id);


}
</script>

Answer 1

因此，從您上次編輯開始，我刪除了 PHP 並嘗試模擬將生成多行的 HTML。

現在剩下幾點：

1. 您的屬性值req_id周圍缺少引號，如id="req_id" 。 （正如@Quentin 在另一個答案中指出的那樣，這不是一個真正的問題，但為了我們的眼睛，讓我們保持整潔）
2. 您正在使用on... html 屬性設置事件處理程序，這是不好的做法。 使用 js addEventListener執行此操作將有助於解決您的問題，如下所示。
3. 您的問題之一是您沒有在每一行為<td>設置不同的id 。 如果您的 id 重復，這可能意味着您應該改用 class。 設置不同的 ID 可以簡化點擊時選擇正確 ID 的過程。 但這不是致命的，所以我們將從這里開始 go。

下面的代碼片段說明了您應該如何在單擊“確認”按鈕的表格行上獲取 ID 為“req_id”的<td>的內部文本的值：

• 為這些按鈕中的每一個添加一個事件偵聽器，並在單擊按鈕時：
• 爬上 DOM 直到你碰到它的父<tr>
• 在這一行中，通過 id 找到<td id="req_id">
• 讀取它的innerText屬性

 //When the DOM is fully loaded window.addEventListener('DOMContentLoaded', _e => { //Find all buttons with class btn-success const buts = document.querySelectorAll('.btn-success'); //Add a click handler to each one buts.forEach(button => { //When the button's clicked button.addEventListener('click', e => { //Find parent <tr> const tr = button.closest('tr'); //Find child with id req_id and get its text const val = tr.querySelector('#req_id').innerText; console.log(val); }); }); });

 <section class="pad-70"> <div class="container"> <p id="demo"></p> <table> <tr> <th>Req ID</th><th>Action</th> </tr> <tr> <td id="req_id">My Value 1</td> <td> <button class="btn btn-lg btn-success">Confirm</button> <button class="btn btn-lg btn-danger">Cancel</button> </td> </tr> <tr> <td id="req_id">My Value 2</td> <td> <button class="btn btn-lg btn-success">Confirm</button> <button class="btn btn-lg btn-danger">Cancel</button> </td> </tr> <tr><td colspan="100">...</td></tr> </table> </div> </section>

我正在使用事件window.DOMContentLoaded以便僅在從 HTML 完全解析 DOM 后觸發我的腳本。 否則，當嘗試為它們分配事件處理程序時，這些按鈕將不存在。

Answer 2

我想獲取 req_id 但每次我從表中獲取 req_id 時，它都會在 Console.log() 中給我未定義。請在表數據 req_id 中查看，是的，數據庫連接正常，我可以看到值。我嘗試了 GET 和 POST 方法但我仍然得到同樣的錯誤。我想要的只是獲取 req_id 並將其顯示在 console.log 中作為定義的值

謝謝你

<!-- main  -->
<section class="pad-70">
    <div class="container">
        <p id="demo"></p>
        <?php
        $userQuery = $connection->Show($conobj, "requested_car");
        if ($userQuery->num_rows > 0) {
            echo "<table><tr><th>Req ID</th><th>Action</th></tr>";
            // output data of each row
            while ($row = $userQuery->fetch_assoc()) {
                echo "<tr ><td id=req_id>";
                echo (htmlentities($row['req_id']));
                echo ("</td><td>");
                echo ('<button onclick="confirmcar()" class="btn btn-lg btn-success">Confirm</button> <button onclick="MyAjaxFunc()" class="btn btn-lg btn-danger">Cancel</button>');
                echo ("</td></tr>\n");
            }
            echo "</table>";
        } else {
            echo "0 results";
        }
        $connection->CloseCon($conobj);
        ?>
    </div>
</section>
<!-- main  -->

<script>
function confirmcar() {

    var req_id = document.getElementById("req_id").value;
    console.log(req_id);


}
</script>