Maison > interface Web > js tutoriel > js méthode simple pour augmenter dynamiquement le nombre de zones de saisie en cliquant sur un bouton dans un formulaire_javascript skills

js méthode simple pour augmenter dynamiquement le nombre de zones de saisie en cliquant sur un bouton dans un formulaire_javascript skills

WBOY
Libérer: 2016-05-16 15:44:30
original
2043 Les gens l'ont consulté

L'exemple de cet article décrit comment implémenter simplement js pour augmenter dynamiquement le nombre de zones de saisie en cliquant sur un bouton dans un formulaire. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Voici une démonstration de la façon d'augmenter dynamiquement le nombre de zones de saisie en cliquant sur un bouton dans un formulaire. La valeur par défaut est qu'il n'y a pas de zone de saisie après avoir cliqué sur le bouton, les zones de saisie continueront d'augmenter à chaque fois. vous cliquez, un sera ajouté. Je pense que c'est plutôt bien, j'espère que cela vous sera utile.

L'effet de l'opération est comme indiqué ci-dessous :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-table-input-button-add-codes/

Le code spécifique est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击按钮动态增加输入框数量</title>
</head>
<body>
<script>var i=1</script>
<input type=button onclick="document.body.insertAdjacentHTML('beforeEnd','<input type=text name='+i+' value='+i+++'> ')" value=添加>
</body>
</html>
Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal