Question

我有一个动态表格，我想使用edit和delete按钮编辑或删除数据，但我无法将ID传递给模态。我无法弄清楚我错过了什么。这是我的示例代码：

 <table id="example" class="table table-striped">
        <thead>
          <tr>
            <th>Param ID</th>
            <th>Decription</th>
            <th>Code</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
          <?php
            require 'lab/db/dbcon.php';
            $query = $con->query("SELECT * FROM param");  
              while($row=mysqli_fetch_array($query)){
              ?>
                <tr>
                  <td><?php echo $row['parid'];?></td> 
                  <td><?php echo $row['parnam']; ?></td> 
                  <td><?php echo $row['parcod']; ?></td> 
                  <td>
                    <a href="" class="btn btn-warning btn-xs" data-toggle="modal" id="<?php echo $row['parid'];?>"data-target="#editpar"><i class="fa fa-pencil"></i>
                    </a>

                    <a href="" class="btn btn-danger btn-xs" data-toggle="modal" id="<?php echo $row['parid']; ?>"   data-target="#delpar"><i class="fa fa-trash"></i>
                    </a>
                  </td> 
                </tr>
              <?php
            }          
          ?>
        </tbody> 
    </table>

 <!-- Start Edit Modal -->
  <div class="modal fade" id="editpar" role="dialog" style="width:100% !important;">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h5 class="modal-title"><i class="fa fa-pencil"></i> Edit record </h5>
        </div>
        <div class="modal-body">
          <h1><?php echo $row['parid'];?></h1>
        </div> 
        <div class="modal-footer">
          <button type="button" class="btn btn-success" name="btnedit" id="<?php echo $row['parid'];?>"> <i class="fa fa-check"></i>
          </button>
          <button type="button" class="btn btn-default" data-dismiss="modal" name="btncancel"><i class="fa fa-remove"></i></button>
        </div>
      </div>
    </div>
  </div>
<!-- End Edit Modal -->

  <!-- Start Delete Modal -->
  <div class="modal fade" id="delpar" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> Are you sure to delete this record?</h5>
        </div>
        <div class="modal-body">
          <h1><?php echo $row['parid'];?></h1>
        </div> 
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" name="btndel" id="<?php echo $row['parid'];?>"> <i class="fa fa-check"></i>
          </button>
          <button type="button" class="btn btn-default" data-dismiss="modal" name="btncancel"><i class="fa fa-remove"></i></button>
        </div>
      </div>
    </div>
  </div>
<!-- End Delete Modal -->

Answer 1

下面的代码将从点击的链接中获取data-id值。这假定您的编辑链接具有data-id属性，该值是其parid。

您可以使用此模板：

$('#editpar').on('show.bs.modal', function (event) {
  var a = $(event.relatedTarget);
  var par_id = a.data('id');

  var modal = $(this)
  modal.find('.modal-title').text('Par #' + par_id);
  modal.find('.modal-body').html('content here');
});

^删除模式的相同框架。

https://getbootstrap.com/docs/4.0/components/modal/ https://getbootstrap.com/docs/3.3/javascript/#modals

如何将值传递给模态？

1 个答案: