如何實現Bootstrap模態框動態獲取表格行數據並填充表單

本教程詳細介紹瞭如何利用Bootstrap的data-*屬性和JavaScript事件，實現從HTML表格中點擊按鈕時，將對應行的數據（如電子郵件地址）動態傳遞給一個單一的Bootstrap模態框，並自動填充模態框內的表單字段。這種方法避免了在循環中重複定義模態框，提高了代碼效率和可維護性，確保模態框始終顯示正確的數據。

在Web應用開發中，尤其是在展示表格數據時，我們經常需要為表格的每一行提供一個操作按鈕，點擊後彈出一個模態框（Modal）來執行編輯、回復等操作。一個常見的問題是，無論點擊哪一行的按鈕，模態框中的表單字段總是顯示相同（通常是第一行）的數據。這是因為模態框的HTML結構被重複定義在循環中，或者沒有正確地將動態數據傳遞給模態框中的表單元素。

本教程將提供一種高效且推薦的解決方案：將模態框定義為單一實例，並利用Bootstrap的JavaScript事件和HTML5的data-*屬性來動態填充模態框中的數據。

核心原理

實現動態數據傳遞的核心在於以下兩點：

1. * `data-屬性：** 在觸發模態框的按鈕（或其他元素）上，使用data-bs-whatever（或其他自定義data-*`屬性）來存儲需要傳遞的動態數據。
2. Bootstrap模態框事件：監聽Bootstrap模態框的show.bs.modal事件。當模態框即將顯示時，此事件會被觸發，並且可以通過event.relatedTarget屬性獲取到觸發模態框的那個按鈕元素。然後，我們可以從該按鈕的data-*屬性中提取所需數據，並將其填充到模態框內的表單字段中。

實現步驟

1. HTML表格結構與動態數據傳遞

首先，我們需要在PHP循環中構建表格行，並在每個“回复”按鈕上嵌入對應的電子郵件地址。這裡，我們利用Bootstrap的data-bs-target和data-bs-toggle屬性來指定要觸發的模態框，並使用data-bs-whatever屬性來傳遞當前行的電子郵件地址。

#	姓名	郵箱	主題	消息	時間	操作
						回复

注意：在輸出動態數據時，使用htmlspecialchars()函數進行轉義，以防止跨站腳本（XSS）攻擊。

2. Bootstrap模態框的定義

模態框的HTML結構應該只定義一次，並且位於PHP循環之外。模態框內部包含用於接收動態數據的表單字段，例如一個用於顯示收件人郵箱的輸入框。

 <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">新消息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" role="form" enctype="multipart/form-data" action="">
                    <div class="row">
                        <!-- 收件人郵箱輸入框，用於動態填充-->
                        <div class="col-md-12 mb-3">
                            <label for="recipient-email" class="col-form-label">收件人:</label>
                            <!-- 注意：這裡的name屬性應與PHP處理時獲取的字段名一致-->
                            <input type="email" class="form-control" name="email" id="recipient-email" readonly>
                        </div>

                        <div class="col-md-12 mb-3">
                            <label for="email-subject" class="col-form-label">郵件主題:</label>
                            <input type="text" class="form-control" name="subject" id="email-subject">
                        </div>

                        <div class="mb-3">
                            <label for="message-text" class="col-form-label">消息內容:</label>
                            <textarea class="form-control" rows="8" name="message" id="message-text"></textarea>
                        </div>

                        <div class="col-md-12 mb-3">
                            <label for="attachment" class="col-form-label">附件</label>
                            <input type="file" class="form-control" name="file[]" multiple id="attachment">
                        </div>
                    </div>
                    <button name="submit" type="submit" class="btn btn-primary">發送郵件</button>
                </form>
            </div>
        </div>
    </div>
</div>

注意：

• 模態框的id (exampleModal) 必須與觸發按鈕的data-bs-target值匹配。
• 為收件人郵箱添加一個id (recipient-email)，方便JavaScript操作。
• 將收件人郵箱輸入框設置為readonly，通常預填充的郵箱不希望用戶隨意修改。

3. JavaScript數據填充邏輯

這是實現動態數據填充的關鍵步驟。我們需要編寫JavaScript代碼來監聽模態框的show.bs.modal事件。當事件觸發時，獲取觸發按鈕的data-bs-whatever屬性值，並將其設置到模態框中對應的輸入字段。

 // 獲取模態框DOM元素var exampleModal = document.getElementById('exampleModal');

// 監聽模態框的show.bs.modal 事件exampleModal.addEventListener('show.bs.modal', function (event) {
    // 獲取觸發模態框的按鈕var button = event.relatedTarget; // `relatedTarget` 是觸發模態框的DOM 元素// 從按鈕的data-bs-whatever 屬性中提取數據var recipientEmail = button.getAttribute('data-bs-whatever');

    // 獲取模態框中的標題和收件人輸入框var modalTitle = exampleModal.querySelector('.modal-title');
    var recipientInput = exampleModal.querySelector('#recipient-email'); // 根據ID獲取收件人輸入框// 更新模態框的標題和收件人輸入框的值modalTitle.textContent = '回复郵件給' recipientEmail;
    recipientInput.value = recipientEmail;
});

將這段JavaScript代碼放置在HTML文件的<script>標籤中，通常在</script>

以上是如何實現Bootstrap模態框動態獲取表格行數據並填充表單的詳細內容。更多資訊請關注PHP中文網其他相關文章！