Comment boucler plusieurs zones d'édition en javascript

Avec le développement continu des applications Web, de plus en plus d'applications nécessitent que les utilisateurs saisissent plusieurs données de formulaire sur une seule page. Ces données de formulaire peuvent inclure des zones de texte, des listes déroulantes, des cases à cocher, etc. Les développeurs front-end doivent utiliser Javascript pour gérer les données de formulaire et doivent être capables de boucler plusieurs zones d'édition pour gérer plusieurs données de formulaire.

Il existe deux manières principales de boucler plusieurs zones d'édition en JavaScript : en utilisant une boucle for et en utilisant une boucle while. Nous aborderons les deux méthodes une par une.

Méthode 1 : utiliser la boucle for

Utilisez la boucle for pour parcourir des tableaux et des objets de type tableau. Un objet de type tableau fait référence à un objet doté d'une propriété de longueur et de certaines propriétés numériques, telles que NodeList et HTMLCollection. L'exemple de code suivant montre comment utiliser une boucle for pour parcourir une NodeList contenant plusieurs zones d'édition :

var textareas = document.querySelectorAll('textarea'); // 获取所有textarea元素
for (var i = 0; i < textareas.length; i++) {
  textareas[i].value = '这是第' + (i+1) + '个编辑框'; // 设置编辑框的值
}

Dans le code ci-dessus, nous utilisons d'abord la méthode querySelectorAll pour obtenir tous les éléments de la zone de texte, puis utilisons une boucle for pour parcourir ces éléments. . Dans la boucle, nous pouvons opérer sur chaque zone d'édition, comme définir son attribut value.

Méthode 2 : utiliser la boucle while

Utilisez la boucle while pour parcourir une liste ou une collection, telle qu'un tableau ou une liste chaînée. L'exemple de code suivant montre comment utiliser une boucle while pour parcourir un tableau contenant plusieurs zones d'édition :

var textareas = document.getElementsByTagName('textarea'); // 获取所有textarea元素
var i = textareas.length; // 初始化计数器
while (i--) {
  textareas[i].value = '这是第' + (i+1) + '个编辑框'; // 设置编辑框的值
}

Dans le code ci-dessus, nous utilisons d'abord la méthode getElementsByTagName pour obtenir tous les éléments de la zone de texte, puis utilisons une boucle while pour parcourir ces éléments. . Dans la boucle, nous pouvons opérer sur chaque zone d'édition, comme définir son attribut value.

Il convient de noter que lorsque nous utilisons une boucle while pour traiter des objets de type tableau, nous devons utiliser un compteur pour parcourir le tableau. Puisque l'index du tableau commence à 0 et que la valeur de la propriété length commence à 1, nous devons initialiser le compteur à la longueur du tableau moins 1.

Résumé

Cet article présente deux méthodes de bouclage javascript de plusieurs zones d'édition : en utilisant une boucle for et en utilisant une boucle while. Ces deux méthodes conviennent à différents types de collections, et les développeurs front-end peuvent choisir la méthode qui leur convient en fonction de la situation spécifique. Dans le même temps, quelle que soit la méthode utilisée, nous pouvons opérer sur chaque zone d'édition et utiliser des boucles pour parcourir plusieurs données de formulaire.

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!