Html中Jacascript弹框，实现编辑功能

Html中Jacascript弹框，实现编辑功能

clipbord_1763348585910

1763347213407

<head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- 主体区域 -->
  <div class="container">…</div>
  <!-- 显示弹框按钮 -->
  <button type="button" class="btn btn-primary data-bs-toggle="modal" data-bs-target=".my-box"></button>
  <!-- 新增-弹出框 -->
  <div class="modal fade add-modal">…</div>
  <!- 编辑-弹出框 -->
  <div class="modal fade edit-modal">…</div>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios. min.js"></script>
  <script src="./lib/form-serialize.js"></script>
  <script src="https://https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script><!-- 核心逻辑 -->

<script src="./js/index.js">
</script>

</body>

一、点击 编辑 出现弹框 获取元素

const editDom = document.querySelector(' .edit-modal' ) 
const editModal = new bootstrap.Modal(editDom)   // 编辑元素->点击->弹框显示

bootstrap.Modal：创建模态对话框（弹出窗口） ，这些对话框会覆盖在父页面上方，要求用户与对话框交互后才能返回主页面。

将表单数据序列化为 JavaScript 对象

<form id="user-form">
  <input name="name" value="John">
  <input name="email" value="john@example.com">
  <select name="category">
    <option value="1" selected>Category 1</option>
    <option value="2">Category 2</option>
  </select>
</form>

<script>
  const form = document.getElementById('user-form');
  const data = serialize(form);
  // 结果: { name: "John", email: "john@example.com", category: "1" }
</script>

单数据的反序列化（将数据填充回表单）

// 将数据填充回表单

function deserializeToForm(formElement, data) {
    Object.keys(data).forEach(key => {
        const element = formElement.querySelector(`[name="${key}"]`);
        if (element) {
            if (element.type === 'checkbox') {
                element.checked = data[key];
            } else if (element.type === 'radio') {
                const radio = formElement.querySelector(`[name="${key}"][value="${data[key]}"]`);
                if (radio) radio.checked = true;
            } else {
                element.value = data[key];
            }
        }
    });
}

// 使用示例
const form = document.getElementById('myForm');
const formData = { name: "张三", email: "zhangsan@example.com", agree: true };
deserializeToForm(form, formData);

删除确认模态框

<div class="modal fade" id="deleteConfirmModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">确认删除</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>您确定要删除此项吗？此操作不可撤销。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-danger">确认删除</button>
      </div>
    </div>
  </div>
</div>

通过点击行记录的编辑，获取该行的id。再通过id，查询数据库的该记录数据。再遍历查询到的数据，循环给表单元素赋值

document.querySelector('.list').addEventListener('click',e => {    
  // 判断点击的是否为编辑元素
  if (e.target.classList.contains('edit')) {
    //获取当前编辑图书数据->回显到编辑表单中 
    const theId = e.target.parentNode.dataset.id 
    axios({
          url:`http://hmajax.itheima.net/api/books/${theId}
    }).then(result => {
      const bookObj= result.data.data      
      //author:"黑马”   bookname:“前端J5与移动开发'  id:84783  publisher:"北京出版社"   [[Prototype]]:object	
      //document.querySelector('.edit-form .bookname').value = bookObj.bookname
      //document.querySelector('.edit-form .author').value = bookObj.author
      const keys = Object.keys(bookObj)  // ['id','bookname','author','publishwe']
      keys.forEach(key=>{
          document.querySelector(`.edit-form .${key}`).value = bookObj[key]
      })
    })	                                   	
    editModal.show()
})

二、修改按钮->点击->隐藏弹框

document.querySelector('.edit-btn').addEventListener('click',()=>{
  editModal.hide()
})
posted @ 2025-11-17 10:47  冀未然  阅读(2)  评论(0)    收藏  举报