当内部有引导模式时，数据表无法工作

Question

我有一个大问题，当我放入 Bootstrap Modal 时，我的数据表无法正常工作，Bootstrap Modal 在 tr 中用于 Edit data for Looping。

这是我的表格和模态

<table id="data" class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>No</th>
      <th><center>Foto</center></th>
      <th><center>Nip</center></th>
      <th><center>Nama</center></th>
      <th><center>Action</center></th>
    </tr>
  </thead>
  <tbody>
    <?php include( "../koneksi.php"); $no=1 ; $data_pegawai=m ysql_query( 'select * from data_pegawai'); while($data=m ysql_fetch_array($data_pegawai)){ ?>
    <tr>
      <td>
        <?php echo $no; ?>
      </td>
      <td>
        <?php echo $data[ 'foto']; ?>
      </td>
      <td>
        <?php echo $data[ 'nip']; ?>
      </td>
      <td>
        <?php echo $data[ 'nama']; ?>
      </td>
      <td>
        <a class="btn btn-warning btn-md" data-toggle="modal" data-target="#myModalEdit<?php echo $data['id']; ?>"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
        <a class="btn btn-danger btn-md"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
      </td>
      <td>
        <!-- Dialog Modal Edit -->
        <div class="modal fade" id="myModalEdit<?php echo $data['id']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel<?php echo $data['id']; ?>" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel<?php echo $data['id']; ?>">Edit Data</h4>
              </div>
              <div class="modal-body">

                <form role="form" action="../master-pegawaiSimpan.php" method="post" enctype="multipart/form-data">
                  <div class="box-body">
                    <div class="form-group">
                      <div class="col-lg-12">
                        <label for="agama">Nip</label>
                        <input type="text" class="form-control" name="nip" placeholder="Nip" value="<?php echo $data['nip']; ?>">
                        <label for="agama">Nama</label>
                        <input type="text" class="form-control" name="nama" placeholder="Nama" value="<?php echo $data['nama']; ?>">
                        <br>
                        <label for="agama">Foto</label>
                        <input type="file" class="form-control" name="foto">
                        <br>
                      </div>

                    </div>
                    <div class="box-footer">
                      <button type="submit" value="Simpan" name="Simpan" class="btn btn-primary">Save</button>
                    </div>
                  </div>
                </form>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <?php $no++; } ?>
  </tbody>
</table>

我对 javascripts 的顺序感到困惑，它有效果吗？ 所以，如果我删除表内的模态，数据表就可以了

Answer 1

您的问题是标题 <th> 元素的数量与数字列 <td> 元素的数量不匹配。它们必须完全匹配。

所以你有两个选择：

1. 添加一个额外的<th> 元素，或者

2. 将模态框放在表格之外。在我看来，这是你应该做的。没有理由一遍又一遍地复制弹出框标记，您可以这样做：

<a class="btn btn-warning btn-md" data-toggle="modal" data-target="#myModalEdit" edit-id="<?php echo $data['id']; ?>"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>

也从模态中删除 id

<div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

并添加一个单击事件以在模式即将显示时从该行填充数据：

$('a[data-toggle="modal"]').on('click', function() {
   $tr = $(this).closest('tr');
   $('[name="nip"]').val($tr.find('td:eq(2)'));
   $('[name="nama"]').val($tr.find('td:eq(3)'));
   //etc
})