jquery 表格内编辑

原创

mob64ca12dd455e 2024-09-25 06:05:14 ©著作权

文章标签 HTML 输入框 jQuery 文章分类 jQuery 前端开发

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

使用 jQuery 实现表格内编辑功能的教程

在现代网页开发中，表格内编辑是一项非常实用的功能。它允许用户直接在表格中修改内容，而不需要跳转到其他页面。本文将指导你如何使用 jQuery 实现这一功能。

流程概述

在着手实现之前，我们可以将整个流程拆分成几个关键的步骤，便于理解和操作。以下是实现表格内编辑的主要流程：

flowchart TD
    A[开始] --> B[创建基本的HTML表格]
    B --> C[引入jQuery库]
    C --> D[实现单元格的点击事件]
    D --> E[创建输入框并显示在单元格中]
    E --> F[监听输入框的失去焦点事件或回车事件]
    F --> G[更新表格数据并隐藏输入框]
    G --> H[结束]

步骤详细说明

1. 创建基本的HTML表格

首先，我们需要创建一个简单的HTML表格。下面的代码包含一个普通的表格，带有一些初始数据。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>可编辑表格</title>
    <link rel="stylesheet" href="style.css">
    <script src="
</head>
<body>

<table id="editable-table">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>北京</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>上海</td>
    </tr>
</table>

<script src="script.js"></script>
</body>
</html>

2. 引入jQuery库

在上面的代码中，我们通过 CDN 引入了 jQuery 库，这使得我们能够使用 jQuery 提供的便利功能来操作 DOM。

3. 实现单元格的点击事件

在用户单击一个单元格时，我们需要捕捉这个事件，以便能够让用户在这个单元格中输入内容。以下是相应的代码：

$(document).ready(function() {
    // 当单元格被点击时
    $('#editable-table td').on('click', function() {
        // 获取当前单元格的内容
        let currentContent = $(this).text();
        
        // 创建输入框并赋予值
        let input = $('<input type="text" />').val(currentContent);
        
        // 用输入框替换单元格内容
        $(this).empty().append(input);
        
        // 将光标聚焦到输入框上
        input.focus();
        
        // 监听输入框的失去焦点事件
        input.on('blur', function() {
            // 获取输入框的值
            let newValue = $(this).val();
            // 将单元格内容更新为输入框的值
            $(this).parent().text(newValue);
        });

        // 监听输入框的回车事件
        input.on('keypress', function(e) {
            if (e.which == 13) { // 13是回车键
                $(this).blur(); // 触发失去焦点事件
            }
        });
    });
});

代码注释说明

$(document).ready(function() {...});：确保 DOM 元素加载完毕后再执行内部的代码。
$('#editable-table td').on('click', function() {...});：为每个表格单元格添加点击事件。
$(this).text();：获取当前单元格的文本内容。
let input = $('<input type="text" />').val(currentContent);：创建一个新的输入框，并将当前单元格的内容作为输入框的默认值。
$(this).empty().append(input);：清空单元格并将输入框添加到该单元格。
input.focus();：使输入框获得焦点，方便用户输入。
input.on('blur', function() {...});：监听输入框失去焦点事件，更新单元格内容。
input.on('keypress', function(e) {...});：监听键盘事件，检测回车键，如果按下则触发失去焦点的事件。