Maison >interface Web >Questions et réponses frontales >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
élément, un pour modifier les données et un pour supprimer des données. La fonction 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(); }); }Dans le code ci-dessus, nous utilisons la syntaxe de sélection de jQuery pour sélectionner toutes les lignes de données contenant le nom spécifié et renvoyons son emplacement via la méthode
.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(); }); }Dans le code ci-dessus, nous utilisons la syntaxe du sélecteur jQuery pour sélectionner les données qui doivent être modifiées et leur attribuer un identifiant. Ensuite, en faisant apparaître une boîte modale, les données qui doivent être modifiées sont affichées à l'utilisateur afin que celui-ci puisse apporter des modifications. Une fois la modification terminée, utilisez jQuery pour retrouver la ligne et mettre à jour les données du tableau. L'opération de fermeture du bouton est également réalisée en fermant la boîte modale. 5. Supprimer des donnéesPour supprimer des données, vous devez toujours afficher les données qui doivent être supprimées à l'utilisateur via une boîte modale, puis écouter l'événement de clic sur le bouton Supprimer et supprimer la ligne du tableau. . Le code est le suivant :
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!