Je travaille sur une application qui a des champs de saisie sur une ligne, Sur le côté il y a une icône d'ajout par laquelle lorsque l'utilisateur clique sur une ligne supplémentaire est ajoutée dynamiquement contenant les champs de saisie . Je souhaite générer dynamiquement les identifiants du champ de saisie précédent lorsque l'utilisateur clique sur l'icône du bouton d'ajout.
Veuillez m'aider?
Code de balisage
<div>
<input type="text" name="1" size="4" id="inp1" value="">
<input type="text" name="2" size="4" id="inp2" value="">
<input type="text" name="3" size="4" id="inp3" value="">
<input type="text" name="4" size="4" id="inp4" value="">
<input type="text" name="5" size="4" id="inp5" value=""> +
</div>
//Icon to add another row of input fields dynamically
<i class="fas fa-plus"></i>
4 Réponses :
<div></div>
for (let i = 0; i < 10; i++) {
let input = document.createElement('input');
input.id = 'input' + i;
document.querySelector('div').appendChild(input);
}
Tout ce dont vous avez besoin est de connaître le prochain index / numéro de l'élément que vous souhaitez ajouter, pour vous assurer qu'il est unique et respecte la numérotation que vous avez déjà en place pour vos éléments préexistants.
Comme vous le souhaitez pour ajouter des entrées par groupes de 5 (et regroupées dans un nouveau Pour chaque fois que vous cliquez sur le bouton, vous voudrez créer un nouveau conteneur ), je vous suggère d'ajouter un élément d'emballage externe afin que nous puissions injecter un nouveau code > (et les 5 nouveaux éléments internes) correctement. , puis utilisez une simple boucle for pour ajouter de manière itérative 5 nouveaux éléments . À chaque itération, vous incrémentez l'ID unique:
<div id="wrapper">
<div>
<input type="text" name="1" size="4" id="inp1" value="">
<input type="text" name="2" size="4" id="inp2" value="">
<input type="text" name="3" size="4" id="inp3" value="">
<input type="text" name="4" size="4" id="inp4" value="">
<input type="text" name="5" size="4" id="inp5" value="">
</div>
</div>
<button type="button" id="btn">Add new input group</button>
// Starting number of inputs
let count = 5;
// Wrapper
const wrapper = document.querySelector('#wrapper');
document.querySelector('#btn').addEventListener('click', () => {
const container = document.createElement('div');
for (let i = 0; i < 5; i++) {
// Increment the count to ensure that it is unique
count++;
// Create your new `<input>` element
const input = document.createElement('input');
input.type = 'text';
input.name = count;
input.size = '4';
input.id = `inp${count}`;
container.appendChild(input);
// Optional: add empty whitespace after each child
container.append(document.createTextNode(' '));
}
wrapper.appendChild(container);
});
Merci beaucoup , Est-il possible que lorsque je clique sur le bouton, il ajoute un autre DIV contenant cinq entrées à chaque fois avec chaque entrée contenant un identifiant unique.
@Martin Quand vous voulez dire unique, vous voulez dire que vous voulez incrémenter le nombre après la chaîne inp ? Par exemple. inp6 à inp10 la première fois que vous ajoutez 5 nouvelles lignes ... et le prochain ajout ajoutera 5 nouvelles entrées d'ID inp11 à < code> inp15 ?
@Martin l'a compris. Voir la réponse mise à jour pour la preuve de concept.
, Merci beaucoup, cela fonctionne bien .. Veuillez consulter le code sur ce lien jsfiddle.net/facgwbsm I ont utilisé votre code pour ajouter des lignes de manière dynamique, ce qui fonctionne bien, en plus de cela, j'essaie d'ajouter plus de lignes et lorsque l'utilisateur sélectionne un nombre dans la table, il est rempli dans les lignes et quand il les survole, la couleur d'arrière-plan change sur toute la rangée et sur la table. Merci de nous aider à ce sujet.
Simplement fait:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"> <div id="inputContainer"> <input type="text" name="1" size="4" id="inp1" value=""> </div> <i class="fas fa-plus" onclick="generateInput()"></i>
var inputContainer = document.getElementById("inputContainer"),
cnt = 1;
function generateInput() {
cnt++;
inputContainer.innerHTML += '<input type="text" name="' + cnt + '" size="4" id="inp' + cnt + '" value="">';
}
Dans mon exemple, j'incrémente simplement la variable cnt chaque fois que la fonction generateInput () est appelée - puis j'ajoute l'entrée au inputContainer avec son nouveau nom ET id
J'espère que cela vous aidera!
Et ça? (J'ai mis le bouton Ajouter en dehors de la DIV contenant les entrées, mais il peut y aller si vous préférez.)
var rowCount = 5;
function addInputSet(btn) {
var row = document.querySelector('div.inputSet').cloneNode(true);
var inputs = row.getElementsByTagName('input');
for(var i of inputs) {
i.name = (++rowCount).toString();
i.id = 'inp' + rowCount;
}
btn.parentNode.insertBefore(row,btn);
}
Javascript:
<div class="inputSet">
<input type="text" name="1" size="4" id="inp1" value="">
<input type="text" name="2" size="4" id="inp2" value="">
<input type="text" name="3" size="4" id="inp3" value="">
<input type="text" name="4" size="4" id="inp4" value="">
<input type="text" name="5" size="4" id="inp5" value="">
</div>
<button onclick="addInputSet(this);">ADD</button>
<i class="fas fa-plus"></i>
Pouvez-vous utiliser jQuery?
Y a-t-il une raison pour laquelle vous avez besoin d'une pièce d'identité? Et pourquoi auriez-vous seulement besoin de générer l'identifiant et non le nom?
@Andreas J'ai besoin d'un identifiant unique pour que chaque champ de saisie de chaque ligne soit unique, je l'utilise dans une autre fonctionnalité.
Il n'y a presque aucune bonne raison pour de tels identifiants, d'où ma question. Pourriez-vous ajouter un exemple qui montre comment vous les utilisez?
Juste pour clarifier, vous voulez que le bouton ajoute un autre DIV contenant cinq entrées à chaque fois?
@Headbank Yah exactement avec un identifiant unique sur chaque entrée sur toutes les lignes.