jquery 修改记录获取列表中的数据回显

原创

mob64ca12ebf2cc 2024-08-04 06:14:19 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12ebf2cc的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 修改记录获取列表中的数据回显教程

在Web开发中，常常需要将页面中的某些信息进行交互和更新，尤其是用户提交的数据回显。在本教程中，我们将介绍如何使用jQuery来修改记录并从列表中读取数据回显。下面将展示整个流程，并分步讲解各个步骤中使用的代码。

流程概览

我们可以将整个流程分为以下几个步骤：

步骤	描述
1	获取列表数据并展示
2	选择记录并点击编辑按钮
3	在表单中回显选中的记录数据
4	更新记录并保存

步骤详解

步骤1：获取列表数据并展示

首先，我们需要准备好一个HTML结构，包含一个可以展示数据的列表（例如，表格或无序列表）。使用jQuery将数据填充到该列表中。

HTML结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>数据回显示例</title>
    <script src="
</head>
<body>
    数据列表
    <ul id="dataList"></ul>
    
    <h2>编辑记录</h2>
    <form id="editForm">
        <input type="text" id="recordInput" placeholder="记录内容" />
        <button type="submit">保存</button>
    </form>
    
    <script src="app.js"></script>
</body>
</html>

JavaScript代码（app.js）：

$(document).ready(function() {
    // 预设数据
    const data = ["记录1", "记录2", "记录3"];
    
    // 填充数据到列表中
    data.forEach((item, index) => {
        $('#dataList').append(`<li data-index="${index}">${item} <button class="edit-btn">编辑</button></li>`);
    });
});

上述代码使用jQuery在文档准备好后填充数据。

步骤2：选择记录并点击编辑按钮

用户点击“编辑”按钮后，需要从对应的记录中获取数据。我们为每个记录的编辑按钮添加事件监听器。

$(document).on('click', '.edit-btn', function() {
    const listItem = $(this).parent(); // 获取对应的列表项
    const recordText = listItem.text().replace(' 编辑', ''); // 获取记录内容
    const index = listItem.data('index'); // 获取索引

    // 将内容填入输入框，并保存索引
    $('#recordInput').val(recordText);
    $('#editForm').data('editIndex', index); // 保存索引以便后续更新
});

这段代码完成了编辑按钮的点击事件设置，获取记录内容并填充到输入框中。

步骤3：在表单中回显选中的记录数据

在步骤2中，我们已将用户选中的数据填充到输入框中，用户可以进行编辑。

步骤4：更新记录并保存

当用户点击“保存”按钮后，我们需要将输入框中的数据更新回列表。

$('#editForm').on('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交

    const updatedText = $('#recordInput').val(); // 获取更新后的文本
    const editIndex = $(this).data('editIndex'); // 获取保存的索引

    // 更新相应的列表项内容
    $(`#dataList li[data-index="${editIndex}"]`).contents().first().replaceWith(updatedText);
    // 清空输入框
    $('#recordInput').val('');
});

上述代码监听表单的提交事件，获取输入框的新值，并更新到对应的列表项。

甘特图展示

以下是整个流程的甘特图，展示各个步骤在时间上的安排。

gantt
    title 数据回显流程
    dateFormat  YYYY-MM-DD
    section 流程
    步骤1 :a1, 2023-10-01, 1d
    步骤2 :after a1  , 1d
    步骤3 :after a1  , 1d
    步骤4 :after a1  , 1d