jquery realizes instant modification-Front-end Q&A-php.cn

jquery realizes instant modification

王林

Release： 2023-05-23 13:43:07

Original

492 people have browsed it

With the development of the Internet, web page interactivity and responsiveness have attracted more and more attention. The inline editing function is also widely used on various websites. Click-to-change refers to the function of directly editing content on the page, that is, there is no need to jump to a new page or use a form to edit. You can directly edit the content on the page with a mouse click, which is very convenient and fast.

In the process of realizing instant changes, jQuery is a very practical tool. jQuery is a fast and concise JavaScript library that provides a variety of functions that can help us easily perform DOM operations, event handling, animation effects, and more. Below we will introduce how to use jQuery to achieve point-and-click changes.

First, we need to prepare a sample page. Let's say we have a page with multiple tables, each with a name and an age value. We hope that users can edit this information directly on the page and automatically save it to the server. The following is the HTML source code of the sample page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>即点即改示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 5px;
            text-align: center;
        }
        th {
            background-color: #eee;
        }
        td.editable {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="editable" data-field="name" data-id="1">张三</td>
                <td class="editable" data-field="age" data-id="1">25</td>
            </tr>
            <tr>
                <td class="editable" data-field="name" data-id="2">李四</td>
                <td class="editable" data-field="age" data-id="2">30</td>
            </tr>
            <tr>
                <td class="editable" data-field="name" data-id="3">王五</td>
                <td class="editable" data-field="age" data-id="3">35</td>
            </tr>
        </tbody>
    </table>
    <script>
        $(document).ready(function() {
            $('td.editable').click(function() {
                var value = $(this).text();
                var field = $(this).data('field');
                var id = $(this).data('id');
                var input = $('<input type="text" />');
                input.val(value);
                $(this).empty().append(input);
                input.focus();
                input.blur(function() {
                    var new_value = $(this).val();
                    if (new_value != value) {
                        var data = {};
                        data[field] = new_value;
                        $.ajax({
                            method: 'POST',
                            url: '/update',
                            data: {
                                id: id,
                                data: JSON.stringify(data)
                            },
                            success: function(response) {
                                console.log('更新成功');
                                $('td.editable[data-id="' + id + '"][data-field="' + field + '"]').text(new_value);
                            },
                            error: function(response) {
                                alert('更新失败');
                                $('td.editable[data-id="' + id + '"][data-field="' + field + '"]').text(value);
                            }
                        });
                    } else {
                        $('td.editable[data-id="' + id + '"][data-field="' + field + '"]').text(value);
                    }
                });
            });
        });
    </script>
</body>
</html>

Copy after login

In the above HTML source code, we used the jQuery library and defined some styles. Among them, each editable cell is set with the editable class, and the field name and row ID are saved using the data-field and data-id attributes. Next, we use jQuery's ready function to bind the click event of each editable cell after the page is loaded. The click event will get the value, field and row ID of the current cell, create an input element, assign the current value to the input element, and input The element is inserted into the current cell so that the user can edit it. After editing is completed, the input element will lose focus, and we can obtain the new value, package it with the row ID and field name into a JSON object, and send it to the server through AJAX for saving. If the save is successful, we will update the original cell content, otherwise it will be restored to the original value.

So far, we have successfully implemented the click-and-change function. Using jQuery to achieve point-and-click changes is very convenient and only requires a few simple lines of code. Of course, actual projects will involve more details and complex business logic, but we can learn from the above code ideas and improve and optimize them according to specific business needs.

The above is the detailed content of jquery realizes instant modification. For more information, please follow other related articles on the PHP Chinese website!