interface Web
Questions et réponses frontales
jquery effectue des ajouts, des suppressions, des modifications et des requêtes
jquery effectue des ajouts, des suppressions, des modifications et des requêtes
Avec la popularisation des applications Web, la demande d'une réponse plus rapide de la part du client est de plus en plus élevée. Une simple interaction entre pages ne peut plus répondre aux besoins du public. A cette époque, la bibliothèque JavaScript jQuery a vu le jour. Dans la plupart des cas, si vous devez effectuer des opérations telles que l'ajout, la suppression, la modification et l'interrogation de données sur la page, jQuery est un choix très pratique. Nous verrons ensuite comment utiliser jQuery pour implémenter les fonctions d'ajout, de suppression, de modification et de vérification.
1. Préparation de la page
Sur la page HTML, vous devez préparer les éléments requis pour l'ajout, la suppression, la modification et la requête, comme indiqué ci-dessous :
<!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>Il comprend des éléments de formulaire et des tableaux de données, ainsi que des références jQuery et fichier JavaScript de personnalisations.
2. Ajouter des données
Lorsque vous utilisez jQuery pour ajouter des données, vous devez définir un formulaire dans la page HTML et ajouter un bouton de soumission. Et écrivez un écouteur d'événement en JavaScript (généralement jQuery_method.js) pour obtenir les données du formulaire et les ajouter au tableau. Le code est le suivant :
$(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);
}Dans le code ci-dessus, nous utilisons jQuery pour écouter le bouton de soumission du formulaire, obtenir les données saisies dans le formulaire et ajouter deux éléments de bouton au dernier td</code > élément, un pour modifier les données et un pour supprimer des données. La fonction <code>addData() est utilisée pour ajouter des données à la table et attribuer un ID à chaque ligne de données. td元素中添加了两个button元素，一个用于修改数据，一个用于删除数据。函数addData()用于将数据添加到表格中，并给每行数据分配一个ID。
三、查询数据
查询数据可以直接操作表格元素来实现。以查询某个姓名为例：
function queryData(name) {
const tr = $(`#table tr td:nth-child(2):contains(${name})`).parent();
return tr;
}以上代码中，我们使用jQuery的选择器语法，选择所有包含指定姓名的所有行数据，并通过.parent()方法返回其所在的tr
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();
});
}.parent() L'élément tr. 4. Modifier les donnéesPour modifier des données, vous devez d'abord interroger les données qui doivent être modifiées, puis les afficher dans une boîte modale (généralement un formulaire), en attendant que l'utilisateur saisisse la valeur qui doit être modifiée. être modifié et soumettre les données modifiées. Après avoir ajouté un écouteur d'événement pour fermer le modal, mettez à jour les données du tableau en fonction de la valeur saisie par l'utilisateur. Le code est le suivant : 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();
});
}rrreee
Dans le code ci-dessus, nous utilisons la syntaxe de sélection de jQuery pour sélectionner les données qui doivent être supprimées et afficher les données qui doivent être supprimées à l'utilisateur en faisant apparaître une boîte modale. Une fois que l'utilisateur clique sur OK, la ligne de données est supprimée de la table. Pour le fonctionnement du bouton d'annulation, la boîte modale est toujours fermée. 🎜🎜6. Résumé🎜🎜Grâce au code ci-dessus, nous pouvons constater qu'il est très facile d'utiliser jQuery pour ajouter, supprimer, modifier et vérifier. Une fois la préparation de la page terminée, utilisez la syntaxe de sélection de jQuery pour sélectionner l'élément DOM qui doit être exploité et utilisez l'écouteur d'événement de jQuery pour gérer l'événement correspondant. Dans le même temps, le code concis de jQuery apporte également une grande commodité. Utiliser jQuery est un très bon choix pour les fonctions d’ajout, de suppression, de modification et de recherche qui ne nécessitent pas de logique complexe. 🎜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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires?
Mar 19, 2025 pm 03:58 PM
L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.
Comment fonctionne le currying en JavaScript et quels sont ses avantages?
Mar 18, 2025 pm 01:45 PM
L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code
Comment fonctionne l'algorithme de réconciliation React?
Mar 18, 2025 pm 01:58 PM
L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159
Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable?
Mar 18, 2025 pm 01:44 PM
Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.
Comment connectez-vous les composants React au magasin Redux à l'aide de Connect ()?
Mar 21, 2025 pm 06:23 PM
L'article discute de la connexion des composants React à Redux Store à l'aide de Connect (), expliquant MapStateToproprop, MapDispatchToprops et des impacts de performances.
Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants?
Mar 19, 2025 pm 03:59 PM
L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.
Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements?
Mar 19, 2025 pm 04:10 PM
L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.
Quels sont les avantages et les inconvénients des composants contrôlés et incontrôlés?
Mar 19, 2025 pm 04:16 PM
L'article traite des avantages et des inconvénients des composants contrôlés et incontrôlés dans la réaction, en se concentrant sur des aspects tels que la prévisibilité, la performance et les cas d'utilisation. Il conseille les facteurs à considérer lors du choix entre eux.
