如何将值传递给modal?

waxmsbnn  于 2021-06-20  发布在  Mysql
关注(0)|答案(1)|浏览(555)

我有一个动态表,我想编辑或删除数据使用 edit 以及 delete 按钮,但我无法将id传递给modal。我不知道我错过了什么。下面是我的示例代码:

<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 -->
ltskdhd1

ltskdhd11#

下面的代码将从单击的链接中获取数据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

相关问题