jquery effectue des ajouts, des suppressions, des modifications et des requêtes-Questions et réponses frontales-php.cn

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 :

   jQuery增删改查     
  jQuery增删改查
  名称： 
 年龄： 
  
   ID  名称  年龄  操作

Copier après la connexion

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.append(``) .append(`${name}`) .append(`${age}`); // 构造表格行中的操作列 const td = $(''); const btn_update = $(''); const btn_delete = $(''); 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); }

Copier après la connexion

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 derniertd é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; }

Copier après la connexion

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

3. Interroger des données

L'interrogation de données peut être réalisée en exploitant directement les éléments de la table. Prenons l'exemple de l'interrogation d'un nom :

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 = $(`  名称： 
 年龄： 
   
 `); $('#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(); }); }

Copier après la connexion

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ées

Pour 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 = $(`   您确定要删除名称为 ${name} 的数据吗？    
 `); $('#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(); }); }

Copier après la connexion

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ées

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