Heim > Artikel > Web-Frontend > jquery realisiert sofortige Änderungen

jquery realisiert sofortige Änderungen

王林Original: 2023-05-23 13:43:07532Durchsuche

Mit der Entwicklung des Internets haben die Interaktivität und Reaktionsfähigkeit von Webseiten immer mehr Aufmerksamkeit auf sich gezogen. Die Inline-Editing-Funktion wird auch häufig auf verschiedenen Websites verwendet. Click-to-Change bezieht sich auf die Funktion zum direkten Bearbeiten von Inhalten auf der Seite, d. h. es ist nicht erforderlich, zu einer neuen Seite zu springen oder ein Formular zum Bearbeiten zu verwenden. Sie können den Inhalt auf der Seite direkt mit einem Mausklick bearbeiten , was sehr bequem und schnell ist.

Bei der Umsetzung sofortiger Änderungen ist jQuery ein sehr praktisches Werkzeug. jQuery ist eine schnelle und übersichtliche JavaScript-Bibliothek, die eine Vielzahl von Funktionen bereitstellt, die uns dabei helfen können, DOM-Operationen, Ereignisbehandlung, Animationseffekte und mehr einfach durchzuführen. Im Folgenden stellen wir vor, wie Sie mit jQuery Point-and-Click-Änderungen erzielen.

Zuerst müssen wir eine Beispielseite vorbereiten. Nehmen wir an, wir haben eine Seite mit mehreren Tabellen, jede mit einem Namen und einem Alterswert. Wir hoffen, dass Benutzer diese Informationen direkt auf der Seite bearbeiten und automatisch auf dem Server speichern können. Das Folgende ist der HTML-Quellcode der Beispielseite:

<!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>

Im obigen HTML-Quellcode haben wir die jQuery-Bibliothek verwendet und einige Stile definiert. Darunter ist jede bearbeitbare Zelle auf editable类，并使用data-field和data-id属性保存了字段名称和行ID。接着，我们在页面加载完成后使用jQuery的ready函数来绑定每个可编辑单元格的点击事件。点击事件会获取当前单元格的值、字段和行ID，并创建一个input元素，将当前值赋值给input元素，并将input元素插入到当前单元格中，以便用户进行编辑。编辑完成后，input gesetzt. Das Element verliert den Fokus und wir können den neuen Wert abrufen, ihn mit der Zeilen-ID und dem Feldnamen in ein JSON-Objekt packen und ihn über AJAX an den Server senden . Ende zum Speichern. Wenn das Speichern erfolgreich ist, aktualisieren wir den ursprünglichen Zelleninhalt, andernfalls wird er auf den ursprünglichen Wert zurückgesetzt.

Bisher haben wir die Click-and-Change-Funktion erfolgreich implementiert. Die Verwendung von jQuery zum Erzielen von Point-and-Click-Änderungen ist sehr praktisch und erfordert nur ein paar einfache Codezeilen. Natürlich erfordern tatsächliche Projekte mehr Details und eine komplexere Geschäftslogik, aber wir können aus den oben genannten Code-Ideen lernen und sie entsprechend den spezifischen Geschäftsanforderungen verbessern und optimieren.

Das obige ist der detaillierte Inhalt vonjquery realisiert sofortige Änderungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript json jquery ajax html 对象事件 dom input

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：nodejs gleiche Schnittstelle, aber unterschiedliche FunktionenNächster Artikel：nodejs gleiche Schnittstelle, aber unterschiedliche Funktionen

In Verbindung stehende Artikel

Mehr sehen