时间戳

首页 > 解决方案 > 使用引导模式框更改输入数据

jquery - 使用引导模式框更改输入数据

问题描述

我使用 jquery 将动态表单数据输入加载到引导模式框：

html:

<table width="100%" class="table table-striped table-bordered table-hover">
  <thead>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Address</th>
    <th>Action</th>
  </thead>
  <tbody>

    <tr>
      <td><input type="text" id="first1" value="name1"></td>
      <td><input type="text" id="last1" value="last1"></td>
      <td><button type="button" class="btn btn-success edit" value="1"> Edit</button></td>
    </tr>
            <tr>
      <td><input type="text" id="first2" value="name2"></td>
      <td><input type="text" id="last2" value="last2"></td>
      <td><button type="button" class="btn btn-success edit" value="2"> Edit</button></td>
    </tr>
  </tbody>
</table>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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>
        <center>
          <h4 class="modal-title" id="myModalLabel">Edit User</h4>
        </center>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="form-group input-group">
            <span class="input-group-addon" style="width:150px;">Firstname:</span>
            <input type="text" style="width:350px;" class="form-control" id="efirst">
          </div>
          <div class="form-group input-group">
            <span class="input-group-addon" style="width:150px;">Lastname:</span>
            <input type="text" style="width:350px;" class="form-control" id="elast">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"> Cancel</button>
        <button type="button" class="btn btn-success"> Update</button>
      </div>
    </div>
  </div>
</div>

JS：

$(document).ready(function() {
  $(document).on('click', '.edit', function() {
    var id = $(this).val();
    var first = $('#first' + id).val();
    var last = $('#last' + id).val();

    $('#edit').modal('show');
    $('#efirst').val(first);
    $('#elast').val(last);
  });
});

在第一步中此代码工作正常并将数据加载到引导模式中，但在第二步中，我如何在单击更新按钮并设置为原始数据后使用模式编辑/更改输入数据。

演示在这里

标签： jquerybootstrap-4bootstrap-modal

解决方案

像这样？

JSFIDDLE

https://jsfiddle.net/m79vrtsx/

$(document).ready(function() {
  $(document).on('click', '.edit', function() {
    var id = $(this).val();
    var first = $('#first' + id).val();
    var last = $('#last' + id).val();

    $('#edit').modal('show');
    $('#efirst').val(first);
    $('#elast').val(last);
    $('.submit_btn').val(id);
  });

  $(document).on('click', '.submit_btn', function() {
    var id = $(this).val();
    var first = $('#efirst').val();
    var last = $('#elast').val();

    $('#first' + id).val(first);
    $('#last' + id).val(last);
    $('#edit').modal('hide');
  });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<table width="100%" class="table table-striped table-bordered table-hover">
  <thead>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Address</th>
    <th>Action</th>
  </thead>
  <tbody>

    <tr>
      <td><input type="text" id="first1" value="name1"></td>
      <td><input type="text" id="last1" value="last1"></td>
      <td><button type="button" class="btn btn-success edit" value="1"> Edit</button></td>
    </tr>
    <tr>
      <td><input type="text" id="first2" value="name2"></td>
      <td><input type="text" id="last2" value="last2"></td>
      <td><button type="button" class="btn btn-success edit" value="2"> Edit</button></td>
    </tr>
  </tbody>
</table>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-id="1">
  <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>
        <center>
          <h4 class="modal-title" id="myModalLabel">Edit User</h4>
        </center>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="form-group input-group">
            <span class="input-group-addon" style="width:150px;">Firstname:</span>
            <input type="text" style="width:350px;" class="form-control" id="efirst">
          </div>
          <div class="form-group input-group">
            <span class="input-group-addon" style="width:150px;">Lastname:</span>
            <input type="text" style="width:350px;" class="form-control" id="elast">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
        <button type="button" class="btn btn-success submit_btn" value=""> Update</button>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

推荐阅读