Php 如何将数据从记录表传递到Modal以进行编辑

我知道这已经被问了很多，但我还没有发现任何关于这个问题的答案是非常有成效的。实际上，我在一个视图中有一个表，它在PHP中使用foreach循环显示，这会一个接一个地吐出记录，并在最后一列中添加一些“操作”按钮（下载、删除和编辑）。下载和删除功能工作得很好，我只需在foreach循环中传递每个记录的ID，工作就完成了

但是，我的模式有很多问题，当我回显每个输入的“值”字段中的数据时，它只显示第一条记录中的数据。我真的很难理解如何让这个功能发挥作用（JQuery不是我最强大的语言）。我已经看到一些关于Ajax的回应，但我不希望在这个项目中使用Ajax。我正在使用codeigniter框架获取更多信息

我认为问题在于，当foreach循环开始运行时，只会创建一次模式，因此，为什么它在模式中只有第一条记录数据，任何帮助都可以绕过这一点，这样我就可以编辑表中的每条记录了！谢谢你的帮助

HTML/PHP：

<div class="container" id="widecontainer">
  <h1 id="title">VMS Failure Records</h1>
  <br>
<!-- print table with results onto view.php -->
<table class="table table-bordered" id="record">
<?php if($results) : ?>
  <thead>
    <tr style="background-color: #d3d3d3;">
      <th>ID</th>
      <th>VSM S/N</th>
      <th>VM S/N</th>
      <th>Project</th>
      <th>Site</th>
      <th>Install Loc</th>
      <th>Observed During</th>
      <th>Comments</th>
      <th>Reported By</th>
      <th>Replaced With</th>
      <th>Date</th>
      <th>Failure Classification</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <!-- foreach result place it in row in table -->
<?php foreach($results as $res) : ?>
      <tr>
        <td><?php echo $res['id'] ?></td>
        <td><?php echo $res['vsm_sn'] ?></td>
        <td><?php echo $res['vm_sn'] ?></td>
        <td><?php echo $res['project'] ?></td>
        <td><?php echo $res['site'] ?></td>
        <td><?php echo $res['install_location'] ?></td>
        <td><?php echo $res['observed_during'] ?></td>
        <td><?php echo $res['comments'] ?></td>
        <td><?php echo $res['reported_by'] ?></td>
        <td><?php echo $res['replaced_with'] ?></td>
        <td><?php echo $res['date'] ?></td>
            <td><?php echo $res['classification'] ?></td>
        <td>
          <?php echo form_open('/pages/delete/'. $res['id']); ?>
            <button type="submit" class="btn btn-danger delete_btn" id="delete_btn" target="#confirmation">
              <i class="fa fa-trash" aria-hidden="true"></i>
            </button>

            <!-- Modal displays when user clicks delete, asking them to confirm the deletion -->
            <div id="confirm" name="confirm" class="modal fade">
              <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Delete Record <i class="fa fa-trash" aria-hidden="true"></i></h4>
                </div>
                <div class="modal-body">
                  <p style="color: red;"><strong>Deleting this record will delete .PDF and QRCode Data.</strong></p>
                  <p>Are you sure you want to delete this record?</p>
                </div>
              <div class="modal-footer">
                  <button type="button" data-dismiss="modal" class="btn btn-danger" id="delete">Delete</button>
                  <button type="button" data-dismiss="modal" class="btn">Cancel</button>
              </div>
              </div>
            </div>
            </div>
          </form>


          <!--Modal displays to allow user to download the selected record. -->
          <?php echo form_open('/pages/downloadFile/'. $res['id']); ?>
            <button type="submit" class="btn btn-primary" alt="Download .pdf">
              <i class="fa fa-download" aria-hidden="true"></i>
            </button>
          </form>

          <form>
            <button type="button" class="btn btn-success update_btn" id="update_btn" data-toggle="modal" data-target="#myModal"
            vsm-sn="<?php echo $res['vsm_sn'];?>" record-id="<?php echo $res['id']; ?>">
              <i class="fa fa-pencil" aria-hidden="true"></i>
            </button>
          </form>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Update Record</h4>
          </div>
          <div class="modal-body">
            <form id="profileForm">
              <input type="hidden" class="form-control" name="id" value="">
           VSM SN : <input class="form-control" name="vsm_sn" value="" placeholder="VSM SN">
           </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

        </td>
      </tr>
<?php endforeach; ?>
<!-- If there are no results, display table headings and message -->
<?php elseif(!$results) : ?>
  <thead>
    <tr>
      <th>ID</th>
      <th>VSM S/N</th>
      <th>VM S/N</th>
      <th>Project</th>
      <th>Site</th>
      <th>Install Loc</th>
      <th>Observed During</th>
      <th>Comments</th>
      <th>Reported By</th>
      <th>Replaced With</th>
      <th>Date</th>
      <th>Failure Classification</th>
    </tr>
  </thead>
  <tbody>
      <h3 style="color: red;">No Results to Display</h3>
</tbody>
<?php endif; ?>
  </tbody>
</table>
</div>
</div>

---

为模态体指定一个id，例如：模态体

声明一个变量来存储模态体的HTML，例如var modalHTML=''

然后将for循环中的内容附加到该变量

---

之后，使用$（'#modal body）将变量附加到模态体。附加（$（modalHTML））。

为模态体指定一个id，例如：modal body

声明一个变量来存储模态体的HTML，例如var modalHTML=''

然后将for循环中的内容附加到该变量

---

之后，使用$（'#modal body）.append（$（modalHTML）），将变量附加到模态体。

最好的方法是使用绑定到模态的事件挂钩，以帮助管理模态上的动态

例如，您希望将信息从for循环传递到model，您可以只使用一个model，然后在打开时更新model

检查引导文档，您将看到此钩子的模态 show.bs.modal

然后，我们使用按钮中的属性来选择要在模式上显示的信息，例如

---

最好的方法是使用绑定到模态的事件挂钩来帮助管理模态上的动态性

例如，您希望将信息从for循环传递到model，您可以只使用一个model，然后在打开时更新model

检查引导文档，您将看到此钩子的模态
show.bs.modal

然后，我们使用按钮中的属性来选择要在模式上显示的信息，例如

您是否试图将用户信息从每个数组传递到modal，然后modal为单击的每个行按钮显示该信息？当然不是用户数据，而是循环到表中的数据。是的，提奥，这是对的！您是否试图将用户信息从每个数组传递到modal，然后modal为单击的每个行按钮显示它？当然不是用户数据，而是循环到表中的数据。是的，提奥，这是对的！我现在不在办公桌旁工作。我回来后会试试的！看看你那里的代码，这正是我想要它做的。非常感谢。嘿，我在我的代码上下文中尝试了这一点，但是当我单击编辑按钮时，没有将任何值放入模式中，我已将顶部的代码替换为完整代码，以防您看到任何可能阻止它工作的内容。谢谢你，阿加尼修好了！！我玩了一下按钮，它似乎已经修复了它，模态中的字段现在填充了每行的正确值，干杯，伙计。我现在不在办公桌上工作。我回来后会试试的！看看你那里的代码，这正是我想要它做的。非常感谢。嘿，我在我的代码上下文中尝试了这一点，但是当我单击编辑按钮时，没有将任何值放入模式中，我已将顶部的代码替换为完整代码，以防您看到任何可能阻止它工作的内容。谢谢你，阿加尼修好了！！我玩了一下按钮，它似乎已经修复了它，模态中的字段现在填充了每行的正确值，干杯，伙计。
$('#myModal').on('show.bs.modal', function (e) {
  // get information to update quickly to modal view as loading begins
  var opener=e.relatedTarget;//this holds the element who called the modal

   //we get details from attributes
  var vsm_sn=$(opener).attr('vsm-sn');

//set what we got to our form
  $('#profileForm').find('[name="vsm_sn"]').val(vsm_sn);
});