Maison > Article > interface Web > jquery réalise une modification instantanée

jquery réalise une modification instantanée

王林original: 2023-05-23 13:43:07482parcourir

Avec le développement d'Internet, l'interactivité et la réactivité des pages Web ont attiré de plus en plus d'attention. La fonction d’édition en ligne est également largement utilisée sur divers sites Web. Cliquer pour modifier fait référence à la fonction de modification directe du contenu de la page, c'est-à-dire qu'il n'est pas nécessaire de passer à une nouvelle page ou d'utiliser un formulaire pour modifier. Vous pouvez modifier directement le contenu de la page d'un simple clic de souris. , ce qui est très pratique et rapide.

Dans le processus de réalisation de changements instantanés, jQuery est un outil très pratique. jQuery est une bibliothèque JavaScript rapide et concise qui fournit une variété de fonctions qui peuvent nous aider à effectuer facilement des opérations DOM, la gestion des événements, des effets d'animation, etc. Ci-dessous, nous expliquerons comment utiliser jQuery pour réaliser des modifications par pointer-cliquer.

Tout d’abord, nous devons préparer un exemple de page. Disons que nous avons une page avec plusieurs tables, chacune avec un nom et une valeur d'âge. Nous espérons que les utilisateurs pourront modifier ces informations directement sur la page et les enregistrer automatiquement sur le serveur. Voici le code source HTML de l'exemple de 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>

Dans le code source HTML ci-dessus, nous avons utilisé la bibliothèque jQuery et défini certains styles. Parmi eux, chaque cellule modifiable est définie sur editable类，并使用data-field和data-id属性保存了字段名称和行ID。接着，我们在页面加载完成后使用jQuery的ready函数来绑定每个可编辑单元格的点击事件。点击事件会获取当前单元格的值、字段和行ID，并创建一个input元素，将当前值赋值给input元素，并将input元素插入到当前单元格中，以便用户进行编辑。编辑完成后，inputL'élément perdra le focus et nous pouvons obtenir la nouvelle valeur, la conditionner avec l'ID de ligne et le nom du champ dans un objet JSON et l'envoyer au serveur via AJAX pour l'enregistrer. Si la sauvegarde réussit, nous mettrons à jour le contenu de la cellule d'origine, sinon il sera restauré à sa valeur d'origine.

À ce stade, nous avons implémenté avec succès la fonction cliquer et modifier. Utiliser jQuery pour réaliser des modifications par pointer-cliquer est très pratique et ne nécessite que quelques lignes de code simples. Bien sûr, les projets réels impliqueront plus de détails et une logique métier complexe, mais nous pouvons tirer les leçons des idées de code ci-dessus et les améliorer et les optimiser en fonction des besoins spécifiques de l'entreprise.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript json jquery ajax html 对象事件 dom input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：nodejs même interface mais fonctions différentesArticle suivant：nodejs même interface mais fonctions différentes

Articles Liés

Voir plus