Maison >interface Web >js tutoriel >Méthode JQuery pour ajouter et supprimer dynamiquement une table rows_jquery

Méthode JQuery pour ajouter et supprimer dynamiquement une table rows_jquery

WBOY
WBOYoriginal
2016-05-16 16:10:341315parcourir

L'exemple de cet article décrit la méthode d'ajout et de suppression dynamiques de lignes de tableau avec JQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Hier, je faisais des ajouts et des suppressions dynamiques de lignes de tableau sur la page. Après avoir lu d'innombrables introductions, j'ai découvert une bonne chose, JQuery. C'est vraiment pratique de le mettre en œuvre. C'est l'une des façons dont j'utilise notre plateforme.

Copier le code Le code est le suivant :
//Enregistrer le nombre de lignes ajoutées
var AreaCount=1;
//Enregistrez le nombre réel de lignes du tableau
var rowCount=1;
//Supprimer le modèle html
var delRowTemplete = "delete"; 🎜> //Modèle de ligne de tableau
var addRowTemplete= "";
$(fonction(){
// Supprimez d'abord le modèle qui doit être cloné. La ligne du modèleid est rowTemplete_0
. addRowTemplete= $("#rowTemplete_0").html();
});
//Ajouter une ligne
fonction addBatchRow(type){
var templete = $("");
//Incrémentez le numéro de série et remplacez [0], _0 ou (0) dans tr ou td pour éviter le même identifiant. Cette conception est principalement destinée à la commodité de la valeur d'arrière-plan
. templete = templete.append(addRowTemplete.replace(/[0]/g,"[" AreaCount "]").replace(/_0/g,"_" AreaCount).
replace("processStat("0")","processStat("areaCount ")"));
//Trouver la dernière ligne existante et raccorder une ligne après
var drapeau = faux;
pour(var i=areaCount-1;i>=0;i--){
if($("#rowTemplete_" i).length>0){ $("#rowTemplete_" i).after(templete.append(delRowTemplete));
pause ;>
>
//Comptez plus un
AreaCount ; RowCount ;
>
//supprimer la ligne
fonction deleteBatchRow(obj){
si (rowCount> 1) {
$(obj).parents("tr").remove();
rowCount--;
} else alert("Conserver au moins une ligne");//Si toutes sont supprimées, il n'y aura aucun moyen d'ajouter plus de lignes et la ligne du modèle sera également supprimée
>
//Obtenir le nombre d'articles
fonction getAreaCount(){
return rowCount;
>
Il est également relativement facile à utiliser en arrière-plan. Il est très pratique de définir des variables de tableau dans FormBean à obtenir et à définir.
J'espère que cet article sera utile à la programmation jQuery de chacun.

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn