正文

table点击编辑修改当前行jquery

技术帮
技术帮 V管理员 /76阅读/0评论
0322

table点击编辑修改当前行jquery

在网页开发中，表格（Table）是一种常用的数据展示方式，为了提高用户体验，我们常常需要为表格添加编辑功能，让用户可以直接在表格中修改数据，本文将详细介绍如何使用jQuery实现点击编辑修改当前行的需求。

我们需要创建一个简单的HTML表格结构，表格中应包含数据以及编辑按钮，以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Edit Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <table id="data-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Alice</td>
                <td>25</td>
                <td><button class="edit-btn">Edit</button></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Bob</td>
                td>30</td>
                <td><button class="edit-btn">Edit</button></td>
            </tr>
        </tbody>
    </table>
    <script>
        // jQuery code will be added here
    </script>
</body>
</html>

table点击编辑修改当前行jquery

接下来，我们将使用jQuery为表格中的编辑按钮添加点击事件，当用户点击编辑按钮时，我们需要将当前行的数据填充到输入框中，并将输入框设置为可编辑状态，以下是实现这一功能的jQuery代码：

$(document).ready(function() {
    $('#data-table').on('click', '.edit-btn', function() {
        var $row = $(this).closest('tr');
        var id = $row.find('td:first').text();
        var name = $row.find('td:nth-child(2)').text();
        var age = $row.find('td:nth-child(3)').text();
        // 创建输入框并插入到表格中
        var inputId = $('<input>').attr({ type: 'text', value: id });
        var inputName = $('<input>').attr({ type: 'text', value: name });
        var inputAge = $('<input>').attr({ type: 'text', value: age });
        $row.find('td:first').html(inputId);
        $row.find('td:nth-child(2)').html(inputName);
        $row.find('td:nth-child(3)').html(inputAge);
        // 移除编辑按钮
        $(this).remove();
    });
});

现在，当用户点击编辑按钮时，当前行的数据将会被替换为可编辑的输入框，接下来，我们需要为输入框添加失去焦点事件，以便在用户完成编辑后将数据更新到表格中，以下是实现这一功能的jQuery代码：

$(document).ready(function() {
    // ...之前的编辑按钮点击事件代码
    // 监听输入框失去焦点事件
    $('#data-table').on('blur', 'input', function() {
        var $row = $(this).closest('tr');
        var id = $row.find('input:first').val();
        var name = $row.find('input:nth-child(2)').val();
        var age = $row.find('input:nth-child(3)').val();
        // 将更新后的数据添加回表格
        $row.find('td:first').text(id);
        $row.find('td:nth-child(2)').text(name);
        $row.find('td:nth-child(3)').text(age);
        // 重新添加编辑按钮
        var editBtn = $('<button class="edit-btn">Edit</button>');
        $row.find('td:last').html(editBtn);
    });
});

至此，我们已经实现了点击编辑按钮修改当前行的需求，用户可以在表格中直接编辑数据，编辑完成后数据会自动更新，这种交互方式可以提高用户体验，让用户更方便地进行数据修改操作，使用jQuery简化了DOM操作，使得代码更加简洁易读。