内部にブートストラップモーダルがある場合、データテーブルは機能しませんでした

ダマラジャティp

大きな問題があります。BootstrapModalを挿入すると、データテーブルが機能します。BootstrapModalは、ループ用のデータの編集のtrにあります。

これが私のテーブルとモーダルです

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

そして私はJavaScriptの順序と混同しました、それは効果をもたらしましたか？したがって、テーブル内のモーダルを削除すると、データテーブルは問題ありませんでした

davidkonrad

問題は、ヘッダー<th>要素の数と列<td>要素の数の不一致です。それらは正確に一致する必要があります。

したがって、2つのオプションがあります。

<th>要素を追加する、または
モーダルをテーブルの外側に配置します。これは私の意見ではあなたがすべきことです。ポップオーバーマークアップを何度も複製する理由はありません。代わりに次のようなことを行うことができます。

<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
})

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]