Je crée une table avec une colonne d'ID de numérotation automatique. Je veux pouvoir avoir mon champ de saisie de texte pour générer automatiquement un numéro d'identification (lorsque l'utilisateur commence à taper dans le champ de saisie du nom).

Comment générer automatiquement un nombre dans un champ de saisie ?

2
ThomasJH 17 mars 2019 à 17:38

2 réponses

Meilleure réponse

Vous pouvez utiliser le code ci-dessous. Ce qu'il fait, c'est qu'à chaque fois que vous cliquez sur le bouton insert, il ajoute un numéro à l'identifiant de l'élément (le numéro à côté du champ de texte).

Ce code utilise document.getElementById() pour modifier tous les éléments et utilise une variable num pour incrémenter la valeur de l'identifiant. La partie où il ajoute l'élément à la liste est facultative - je l'ai juste ajoutée pour le rendre plus réaliste.

var num = 1;
var input = document.getElementById('item');
var p = document.getElementById('number');
var list = document.getElementById('list');
var button = document.getElementById('insert');

button.addEventListener('click', function() {
  num++;
  p.innerHTML = num;
  list.innerHTML += "<li>" + input.value + "</li>";
});
#item {
  display: inline;
}

#number {
  display: inline;
  margin-right: 10px;
}
<p id='number'>1</p>
<input type='text' id='item' />
<button id='insert'>Insert</button>

<ul id='list'>
  
</ul>
1
Aniket G 17 mars 2019 à 14:49

Si vous avez un tableau HTML, vous pouvez répondre à toutes les modifications, écouter l'événement input et décider de remplir un numéro unique (ou de l'effacer).

Voici une fonction générique que vous pourriez appeler et qui prend en argument l'élément de table qui devrait avoir cette fonctionnalité, et le numéro de la colonne qui devrait recevoir ces valeurs d'ID.

Exemple:

function autoId(table, colNo) {
    table.addEventListener("input", function(e) {
        const tr = e.target.closest("tr");
        const idInput = tr.cells[colNo].querySelector("input");
        for (const input of tr.querySelectorAll("input")) {
            hasData = input.value.trim() !== "" && input !== idInput;
            if (hasData) break;
        }
        if (hasData && idInput.value.trim() === "") {
            idInput.value = (Math.max(...Array.from(
                table.querySelectorAll("td:nth-child(" + (colNo+1) + ") input"), 
                input => +input.value
            ).filter(v => !isNaN(v))) || 0) + 1;
        } else if (!hasData && idInput.value.trim() !== "") {
            idInput.value = "";
        }
    });
}

const table = document.querySelector("table");

// Call the function passing it the table and the column that has the ID -- that's all
autoId(table, 0);

// Let's give user the possibility to add rows, using the first data row as template
document.querySelector("#btnAddRow").addEventListener("click", () => {
    table.insertAdjacentHTML("beforeend", table.rows[1].innerHTML);
});
<table>
<tr><th>ID</th><th>Name</th></tr>
<tr><td><input size="2"></td><td><input></td></tr>
</table>
<button id="btnAddRow">Add row</button>
0
trincot 17 mars 2019 à 15:47