Comment mettre à jour rapidement les tables avec jquery

Dans le développement front-end, l'affichage de tableaux est très courant. Cependant, lorsque les données du tableau doivent être mises à jour, si des méthodes traditionnelles sont utilisées, telles que la modification directe des éléments du DOM, la lisibilité et la maintenabilité du code deviendront très mauvaises. A l’heure actuelle, l’émergence de la bibliothèque jQuery nous apporte une solution pour mettre à jour rapidement les tables.

jQuery est une bibliothèque JavaScript très populaire. Sa principale caractéristique est qu'elle fournit une API simple et rapide, qui peut nous aider à exploiter le DOM avec élégance et à créer rapidement des pages interactives. Parmi eux, jQuery fournit de nombreuses méthodes pratiques qui peuvent nous aider à mettre à jour rapidement les données du tableau. Expliquons l'implémentation spécifique étape par étape.

1. Récupérer l'objet table

Avant de commencer à mettre à jour la table, nous devons d'abord récupérer l'objet table. Les éléments du tableau peuvent être sélectionnés à l'aide des sélecteurs de jQuery. Par exemple, si nous avons une table avec un identifiant de classe "table-data", le code est le suivant :

let table = $(".table-data");

Grâce à cet objet table, nous pouvons opérer sur la table.

2. Utilisez .text() pour mettre à jour le contenu de la cellule

Si nous avons seulement besoin de mettre à jour le contenu du texte dans la cellule, nous pouvons utiliser la méthode .text() pour le compléter. Obtenez l'élément de cellule que vous souhaitez modifier via le sélecteur, puis utilisez la méthode text() pour transmettre le contenu du texte qui doit être mis à jour via les paramètres. Par exemple, modifiez le texte de la cellule de la ligne 2 et de la colonne 3 en "texte modifié":

let td = table.find("tr:eq(1) td:eq(2)");
td.text("修改后的文本");

A noter que le sélecteur :eq est utilisé ici, ce qui signifie sélectionner l'élément correspondant à un certain numéro de série, en comptant à partir de 0. Par conséquent, tr:eq(1) signifie sélectionner l'élément dans la ligne 2 du tableau, tandis que td:eq(2) signifie sélectionner l'élément de cellule dans la colonne 3.

3. Utilisez .attr() pour mettre à jour les attributs de la cellule

En plus de mettre à jour le contenu du texte dans la cellule, nous devons parfois également mettre à jour les attributs de la cellule. Par exemple, nous devrons peut-être mettre à jour les attributs data-* dans la cellule, ou modifier l'attribut class de la cellule, etc. À ce stade, cela peut être fait en utilisant la méthode .attr(). Par exemple, modifiez l'attribut data-id dans la cellule de la ligne 2 et de la colonne 3 en 123 :

let td = table.find("tr:eq(1) td:eq(2)");
td.attr("data-id", "123");

Il convient de noter que si plusieurs attributs doivent être mis à jour, la valeur peut être transmise via un objet. Par exemple, modifiez l'attribut class et l'attribut data-id de la cellule dans la ligne 2, colonne 3, le code est le suivant :

let td = table.find("tr:eq(1) td:eq(2)");
td.attr({
  "class": "new-class",
  "data-id": "123"
});

4 Utilisez .html() pour mettre à jour le contenu de la cellule

Parfois, lors de la mise à jour du. contenu de la cellule, si Si le contenu qui doit être mis à jour contient des balises HTML, vous pouvez utiliser la méthode .html(). Semblable à l'utilisation de la méthode .text(), vous pouvez utiliser le sélecteur jQuery pour sélectionner les cellules qui doivent être mises à jour, puis transmettre le code HTML qui doit être mis à jour via les paramètres. Par exemple, modifiez le contenu de la cellule de la ligne 2 et de la colonne 3 en :

let td = table.find("tr:eq(1) td:eq(2)");
td.html("<a href='#'>链接文本</a>");

5. Utilisez .replaceWith() et .replaceWith() pour mettre à jour l'intégralité du contenu de la ligne

Parfois, nous devons mettre à jour la ligne entière où se trouve le la cellule est localisée, alors utiliser la méthode ci-dessus semblera un peu gênant. À ce stade, vous pouvez utiliser la méthode .replaceWith() pour remplacer directement toute la ligne de code HTML. Par exemple, remplacez tout le contenu de la ligne 2 par :

let tr = table.find("tr:eq(1)");
tr.replaceWith("<tr><td>新的单元格内容1</td><td>新的单元格内容2</td><td>新的单元格内容3</td></tr>");

De plus, si vous devez uniquement modifier toute la ligne où se trouve une certaine cellule, vous pouvez d'abord obtenir le code HTML de la ligne entière, puis remplacer le rangée où se trouve la cellule Can.

let td = table.find("tr:eq(1) td:eq(2)");
let tr = td.parents("tr");
tr.replaceWith("<tr><td>新的单元格内容1</td><td>新的单元格内容2</td><td>新的单元格内容3</td></tr>");

6. Utilisez .empty() et .append() pour mettre à jour le contenu du tableau

En plus d'utiliser les méthodes ci-dessus pour mettre à jour les cellules une par une ou la ligne entière, une autre méthode consiste à utiliser .empty() de jQuery. et Méthode .append() pour effacer le contenu original du tableau et ajouter un nouveau code HTML. Par exemple, pour remplacer l'intégralité du contenu du tableau par un nouveau code HTML, vous pouvez utiliser la méthode suivante :

let newHtml = "<table><tr><td>新的单元格内容1</td><td>新的单元格内容2</td><td>新的单元格内容3</td></tr></table>";
table.empty().append(newHtml);

Voici quelques méthodes d'utilisation de jQuery pour mettre à jour rapidement le tableau. Grâce à cette méthode, le tableau peut être mis à jour de manière pratique et rapide. , et la maintenabilité du code peut être améliorée. La lisibilité nous permet également de modifier et de mettre à jour rapidement les données du tableau.

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!