jquery führt Hinzufügungen, Löschungen, Änderungen und Abfragen durch-Front-End-Fragen und Antworten-php.cn

Mit der Popularisierung von Webanwendungen wird die Nachfrage nach einer zeitnaheren Reaktion des Kunden immer höher und kann den Bedürfnissen der Öffentlichkeit nicht mehr gerecht werden. Zu dieser Zeit entstand die JavaScript-Bibliothek jQuery. In den meisten Fällen ist jQuery eine sehr praktische Wahl, wenn Sie Daten auf der Seite hinzufügen, löschen, ändern und abfragen müssen. Als nächstes besprechen wir, wie man jQuery zum Implementieren der Funktionen zum Hinzufügen, Löschen, Ändern und Überprüfen verwendet.

1. Seitenvorbereitung

Auf der HTML-Seite müssen Sie die Elemente vorbereiten, die zum Hinzufügen, Löschen, Ändern und Abfragen erforderlich sind, wie unten gezeigt:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery增删改查</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/styles.css">
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <script src="./js/jquery_method.js"></script>
</head>
<body>

    <h1>jQuery增删改查</h1>

    <form id="add_form">
        <label for="add_name">名称：</label>
        <input type="text" id="add_name" name="name" required><br>
        <label for="add_age">年龄：</label>
        <input type="number" id="add_age" name="age" required><br>
        <button type="submit" id="add_btn">添加</button>
    </form>

    <table id="table" border="1">
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
    </table>

</body>
</html>

Nach dem Login kopieren

#🎜🎜 #Es enthält Formularelemente und Datentabellen sowie jQuery-Referenzen und benutzerdefinierte JavaScript-Dateien.

2. Daten hinzufügen

Wenn Sie jQuery zum Hinzufügen von Daten verwenden, müssen Sie ein Formular auf der HTML-Seite definieren und eine Senden-Schaltfläche hinzufügen. Und schreiben Sie einen Ereignis-Listener in JavaScript (normalerweise jQuery_method.js), um die Daten des Formulars abzurufen und sie der Tabelle hinzuzufügen. Der Code lautet wie folgt:

$(document).ready(function () {
    // 监听添加操作
    $('#add_btn').on('click', function (e) {
        e.preventDefault();     // 阻止表单默认提交行为
        const name = $('#add_name').val();
        const age = $('#add_age').val();
        addData(name, age);
    });
});

function addData(name, age) {
    // 构造表格行
    const tr = $('<tr>');
    tr.append(`<td id="id_${name}"></td>`)
        .append(`<td>${name}</td>`)
        .append(`<td>${age}</td>`);
    // 构造表格行中的操作列
    const td = $('<td>');
    const btn_update = $('<button>修改</button>');
    const btn_delete = $('<button>删除</button>');
    btn_update.on('click', function () {
        updateData(name);
    });
    btn_delete.on('click', function () {
        deleteData(name);
    });
    td.append(btn_update).append(btn_delete);
    tr.append(td);
    // 添加到表格中
    $('#table').append(tr);

    // 分配ID
    const id = $('#table tr').length;
    $(`#id_${name}`).html(id);
}

Nach dem Login kopieren

Im obigen Code verwenden wir jQuery, um die Senden-Schaltfläche des Formulars abzuhören, die in das Formular eingegebenen Daten abzurufen und sie im letzten hinzuzufügen td-Element Es gibt zwei Schaltflächenelemente, eines zum Ändern von Daten und eines zum Löschen von Daten. Die Funktion addData() wird verwendet, um Daten zur Tabelle hinzuzufügen und jeder Datenzeile eine ID zuzuweisen.

td元素中添加了两个button元素，一个用于修改数据，一个用于删除数据。函数addData()用于将数据添加到表格中，并给每行数据分配一个ID。

三、查询数据

查询数据可以直接操作表格元素来实现。以查询某个姓名为例：

function queryData(name) {
    const tr = $(`#table tr td:nth-child(2):contains(${name})`).parent();
    return tr;
}

Nach dem Login kopieren

以上代码中，我们使用jQuery的选择器语法，选择所有包含指定姓名的所有行数据，并通过.parent()方法返回其所在的tr3. Daten abfragen

Das Abfragen von Daten kann durch direktes Bedienen von Tabellenelementen erreicht werden. Nehmen Sie als Beispiel die Abfrage eines Namens:

function updateData(name) {
    const tr = queryData(name);
    const old_name = tr.find('td').eq(1).text();
    const old_age = tr.find('td').eq(2).text();
    const $form_update = $(`
            <form>
                <label for="update_name">名称：</label>
                <input type="text" id="update_name" name="update_name" value="${old_name}" required><br>
                <label for="update_age">年龄：</label>
                <input type="number" id="update_age" name="update_age" value="${old_age}" required><br>
                <button type="submit">修改</button>
                <button type="button" id="close_btn">关闭</button>
            </form>
        `);
    $('#table').after($form_update);

    $form_update.on('submit', function (e) {
        e.preventDefault();
        const new_name = $('#update_name').val();
        const new_age = $('#update_age').val();
        tr.find('td').eq(1).text(new_name);
        tr.find('td').eq(2).text(new_age);
        tr.attr('id', `id_${new_name}`);
        $form_update.remove();
    });
    $('#close_btn').on('click', function () {
        $form_update.remove();
    });
}

Nach dem Login kopieren

Im obigen Code verwenden wir die Selektorsyntax von jQuery, um alle Datenzeilen auszuwählen, die den angegebenen Namen enthalten, und übergeben .parent()</ Die Methode code> gibt das Element <code>tr zurück, in dem es sich befindet.

4. Daten ändern

Um die Daten zu ändern, müssen Sie zunächst die Daten abfragen, die geändert werden müssen, und sie dann in einem modalen Feld (normalerweise einem Formular) anzeigen. , warten Der Benutzer gibt den zu ändernden Wert ein und sendet die geänderten Daten. Nachdem Sie einen Ereignis-Listener zum Schließen des Modals hinzugefügt haben, aktualisieren Sie die Daten in der Tabelle basierend auf dem vom Benutzer eingegebenen Wert. Der Code lautet wie folgt:

function deleteData(name) {
    const tr = queryData(name);
    const $form_delete = $(`
            <form>
                <label>
                    您确定要删除名称为 <strong>${name}</strong> 的数据吗？
                </label>
                <button type="submit">确定</button>
                <button type="button" id="close_btn">取消</button>
            </form>
        `);
    $('#table').after($form_delete);

    $form_delete.on('submit', function (e) {
        e.preventDefault();
        tr.remove();
        $form_delete.remove();
    });
    $('#close_btn').on('click', function () {
        $form_delete.remove();
    });
}

Nach dem Login kopieren

Im obigen Code verwenden wir die jQuery-Selektorsyntax, um die Daten auszuwählen, die geändert werden müssen, und weisen ihnen eine ID zu. Durch das Öffnen eines modalen Felds werden dem Benutzer dann die Daten angezeigt, die geändert werden müssen, sodass der Benutzer Änderungen vornehmen kann. Nachdem die Änderung abgeschlossen ist, verwenden Sie jQuery, um die Zeile erneut zu finden und die Daten in der Tabelle zu aktualisieren. Der Vorgang zum Schließen der Schaltfläche wird auch durch Schließen der Modalbox erreicht.

5. Daten löschen

Zum Löschen von Daten müssen Sie dem Benutzer weiterhin die zu löschenden Daten über ein modales Feld anzeigen und dann das Klickereignis überwachen Klicken Sie auf die Schaltfläche „Löschen“ und löschen Sie die Zeile in der Tabelle. Der Code lautet wie folgt:

rrreee

Im obigen Code verwenden wir die Selektorsyntax von jQuery, um die Daten auszuwählen, die gelöscht werden müssen, und zeigen dem Benutzer die Daten, die gelöscht werden müssen, durch Popup an eine modale Box. Nachdem der Benutzer auf „OK“ geklickt hat, wird die Datenzeile aus der Tabelle gelöscht. Für die Betätigung des Abbrechen-Buttons ist die Modalbox weiterhin geschlossen.

#🎜🎜# 6. Zusammenfassung #🎜🎜##🎜🎜# Durch den obigen Code können wir feststellen, dass es sehr einfach ist, jQuery zum Hinzufügen, Löschen, Ändern und Überprüfen zu verwenden. Nachdem die Seitenvorbereitung abgeschlossen ist, verwenden Sie die Selektorsyntax von jQuery, um das zu bedienende DOM-Element auszuwählen, und verwenden Sie den Ereignis-Listener von jQuery, um das entsprechende Ereignis zu verarbeiten. Gleichzeitig bietet der prägnante Code von jQuery auch großen Komfort. Die Verwendung von jQuery ist eine sehr gute Wahl für Funktionen zum Hinzufügen, Löschen, Ändern und Abfragen, die keine komplexe Logik erfordern. #🎜🎜#

Das obige ist der detaillierte Inhalt vonjquery führt Hinzufügungen, Löschungen, Änderungen und Abfragen durch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!