如何將值從動態表傳遞到引導模式

Question

我通過使用 PHP 從 SQL 獲取數據創建了一個動態表。 每行都有一個鏈接到模態的編輯按鈕。 我想將值從表傳遞到模式，以便我可以編輯它。

我試過循環槽表行並能夠獲取不同列的值。 但是，每次我單擊任何編輯按鈕時，只有最后一行被傳遞到模態輸入。

這是我的標記：模態

<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-sm" role="document">
                                    <form role="form" method="POST" action="php/add_category.php">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Category</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="form-group">
                                                    <input type="hidden" class="form-control" name="categoryID" id="categoryID">
                                                    <label for="category">Category</label>
                                                    <input type="text" class="form-control" name="category" required id="category">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

桌子

<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
                                    <thead>
                                        <tr>
                                            <th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
                                            <th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
                                            <th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php foreach($categories as $category){ ?>  
                                        <tr class="footable-even" style="">
                                            <td class="footable-visible footable-first-column" id="tdCategoryID"><span class="footable-toggle"></span>
                                                <?php echo $category['categoryID']; ?>
                                            </td>
                                            <td class="footable-visible" id="tdCategory">
                                            <?php echo $cakeOrdering->escape($category['category']); ?>
                                            </td> 
                                            <td class="text-right footable-visible footable-last-column">
                                                <div class="btn-group">
                                                    <button class="btn-white btn btn-xs">Delete</button>
                                                    <button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
                                                </div>
                                            </td>
                                        </tr>
                                    <?php } ?>
                                    </tbody>
                                </table>

腳本

<script  type="text/javascript">
   $(document).ready(function () {
        var table = document.getElementById("main-table");
        $('#main-table tr').each(function(i, row){
            var $row = $(row);

            var category = $row.find('td:nth-child(2)').text().trim();
            console.log(category);
            $('#category').val(category);
        });   
    });
</script>

這是 output Output

當我嘗試將值打印到控制台時。 控制台日志

Answer 1

您正在每個循環內的輸入框中設置類別的值，這是設置最后一個值的原因。 相反，您可以在編輯按鈕上編寫click事件，以便單擊此按鈕獲取類別名稱並將其放在模式輸入框內。

演示代碼：

 $(document).ready(function() { //on click modal buton $(".editCategory").on("click", function() { var category = $(this).closest("tr").find('td:nth-child(2)').text().trim(); //get cat name $('#category').val(category); //set value }) });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm" role="document"> <form role="form" method="POST" action="php/add_category.php"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Category</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div class="form-group"> <input type="hidden" class="form-control" name="categoryID" id="categoryID"> <label for="category">Category</label> <input type="text" class="form-control" name="category" required id="category"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button> </div> </div> </form> </div> </div> Table <table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15"> <thead> <tr> <th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th> <th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th> <th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th> </tr> </thead> <tbody> <tr class="footable-even" style=""> <td class="footable-visible footable-first-column"><span class="footable-toggle"></span> 1 </td> <td class="footable-visible"> abc </td> <td class="text-right footable-visible footable-last-column"> <div class="btn-group"> <button class="btn-white btn btn-xs">Delete</button> <!--use class here--> <button class="btn-white btn btn-xs editCategory" data-toggle="modal" data-target="#modalCategory">Edit</button> </div> </td> </tr> <tr class="footable-even" style=""> <td class="footable-visible footable-first-column"><span class="footable-toggle"></span> 2 </td> <td class="footable-visible"> abcd </td> <td class="text-right footable-visible footable-last-column"> <div class="btn-group"> <button class="btn-white btn btn-xs">Delete</button> <!--use class here--> <button class="btn-white btn btn-xs editCategory" data-toggle="modal" data-target="#modalCategory">Edit</button> </div> </td> </tr> </tbody> </table>

Answer 2

要實現您的要求，您可以連接到show.bs.modal事件。 在事件處理程序中，您可以獲得對被單擊按鈕的引用。 您可以使用該引用遍歷 DOM 以找到包含類別名稱的相關td 。 最后，您可以使用該類別名稱在模式中設置input的值。

另外，我強烈建議您從您在 PHP 循環中創建的 HTML 內容中刪除id屬性，因為id在 DOM 中必須是唯一的。 同樣，刪除內聯style屬性，因為樣式應該放在外部樣式表中。

說了這么多，試試這個：

 $('#modalCategory').on('show.bs.modal', e => { var $button = $(e.relatedTarget); $('#category').val($button.closest('td').prev().text().trim()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm" role="document"> <form role="form" method="POST" action="php/add_category.php"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Category</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div class="form-group"> <input type="hidden" class="form-control" name="categoryID" id="categoryID"> <label for="category">Category</label> <input type="text" class="form-control" name="category" required id="category"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button> </div> </div> </form> </div> </div> <table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15"> <thead> <tr> <th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th> <th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th> <th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th> </tr> </thead> <tbody> <tr class="footable-even"> <td class="footable-visible footable-first-column"> <span class="footable-toggle"></span> CategoryID_1 </td> <td class="footable-visible"> Category 1 </td> <td class="text-right footable-visible footable-last-column"> <div class="btn-group"> <button class="btn-white btn btn-xs">Delete</button> <button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button> </div> </td> </tr> <tr class="footable-even"> <td class="footable-visible footable-first-column"> <span class="footable-toggle"></span> CategoryID_2 </td> <td class="footable-visible"> Category 2 </td> <td class="text-right footable-visible footable-last-column"> <div class="btn-group"> <button class="btn-white btn btn-xs">Delete</button> <button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button> </div> </td> </tr> </tbody> </table>