Web-Frontend
Front-End-Fragen und Antworten
jquery führt Hinzufügungen, Löschungen, Änderungen und Abfragen durch
jquery führt Hinzufügungen, Löschungen, Änderungen und Abfragen durch
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>$(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);
} 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;
}以上代码中，我们使用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();
});
}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();
});
}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:
rrreeeIm 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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen?
Mar 19, 2025 pm 03:58 PM
In dem Artikel wird die Verwendung von UseEffect in React, einen Haken für die Verwaltung von Nebenwirkungen wie Datenabrufen und DOM -Manipulation in funktionellen Komponenten erläutert. Es erklärt die Verwendung, gemeinsame Nebenwirkungen und Reinigung, um Probleme wie Speicherlecks zu verhindern.
Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile?
Mar 18, 2025 pm 01:45 PM
In dem Artikel wird das Currying in JavaScript, einer Technik, die Multi-Argument-Funktionen in Einzelargument-Funktionssequenzen verwandelt. Es untersucht die Implementierung von Currying, Vorteile wie teilweise Anwendungen und praktische Verwendungen, Verbesserung des Code -Lesens
Wie funktioniert der React -Versöhnungsalgorithmus?
Mar 18, 2025 pm 01:58 PM
Der Artikel erläutert den Versöhnungsalgorithmus von React, der das DOM effizient aktualisiert, indem virtuelle DOM -Bäume verglichen werden. Es werden Leistungsvorteile, Optimierungstechniken und Auswirkungen auf die Benutzererfahrung erörtert.
Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben?
Mar 18, 2025 pm 01:44 PM
Funktionen höherer Ordnung in JavaScript verbessern die Übersichtlichkeit, Wiederverwendbarkeit, Modularität und Leistung von Code durch Abstraktion, gemeinsame Muster und Optimierungstechniken.
Wie verbinden Sie React -Komponenten mit Connect () an den Redux -Store?
Mar 21, 2025 pm 06:23 PM
In Artikel werden die Verbindungskomponenten an Redux Store mit Connect () verbinden, wobei MapStatetoprops, MapDispatchtoprops und Leistungsauswirkungen erläutert werden.
Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen?
Mar 19, 2025 pm 03:59 PM
Der Artikel erläutert den Usecontext in React, was das staatliche Management durch Vermeidung von Prop -Bohrungen vereinfacht. Es wird von Vorteilen wie zentraler Staat und Leistungsverbesserungen durch reduzierte Neulehre erörtert.
Wie verhindern Sie das Standardverhalten bei Ereignishandlern?
Mar 19, 2025 pm 04:10 PM
In Artikeln werden das Standardverhalten bei Ereignishandlern mithilfe von PURDDEFAULT () -Methoden, seinen Vorteilen wie verbesserten Benutzererfahrungen und potenziellen Problemen wie Barrierefreiheitsproblemen verhindern.
Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten?
Mar 19, 2025 pm 04:16 PM
Der Artikel erörtert die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten bei React, wobei sich auf Aspekte wie Vorhersehbarkeit, Leistung und Anwendungsfälle konzentriert. Es rät zu Faktoren, die bei der Auswahl zwischen ihnen berücksichtigt werden müssen.
