как передать значение из динамической таблицы в модальный загрузчик

ProgramBox

как передать значение из динамической таблицы в модальный загрузчик

Post author:admin
Запись опубликована:25 января, 2022
Post category:Вопросы по программированию

#javascript #jquery #bootstrap-modal

Вопрос:

Я создал динамическую таблицу, извлекая данные из SQL с помощью PHP. в каждой строке есть кнопка редактирования, связанная с модальным. Я хочу передать значение из таблицы в модальное, чтобы я мог его отредактировать.

Я попытался зациклить строку таблицы и смог получить значения разных столбцов. Однако каждый раз, когда я нажимал какие-либо кнопки редактирования, только последняя строка передавалась на вход в модальном режиме.

вот моя разметка: Модальная

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

Это и есть выходной
выход

Когда я попытался вывести значения в консоль. Консоль.журнал

Ответ №1:

Чтобы достичь того, что вам нужно, вы можете подключиться к show.bs.modal событию. В обработчике событий вы можете получить ссылку на кнопку, на которую вы нажали. Вы можете использовать эту ссылку для обхода DOM, чтобы найти ссылку td , содержащую название категории. Наконец, вы можете установить значение input в модальном с этим именем категории.

В качестве отступления я бы настоятельно рекомендовал вам удалить id атрибуты из HTML-контента, который вы создаете в цикле PHP, поскольку 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">amp;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>

1. Это сработало! Спасибо @Rory. Я перепробовал все в течение 2 дней с циклическим перебором строк таблицы. Оказывается , все, что мне было нужно show.bs.modal , это то, о чем я сейчас понятия не имею. Спасибо вам за более ясное объяснение и за другие комментарии тоже.

2. Другое дело, у меня также есть ввод для идентификатора категории, который был скрыт. Правильно ли, если я сделаю два .prev() таких $('#categoryID').val($button.closest('td').prev().prev().text().trim()); действия, чтобы получить доступ к идентификатору категории?

Ответ №2:

Вы устанавливаете значение категории в поле ввода внутри каждого цикла, поэтому задано последнее значение. Вместо этого вы можете написать 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">amp;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>