Comment créer des identifiants uniques en parcourant des données dans Golang et utiliser en Javascript

Question

Je reçois des données du serveur et j'y répète pour créer une table, puis j'utilise un formulaire pour stocker un identifiant dans un stockage local en utilisant javascript. Voici l'extrait de code

<table> 
    <tr><th>Product ID</th></tr> 
    {{range .}} 
    <td ><form onsubmit="save_data()" action="/" method="get"><button class="btn btn-info pid" id="pid" name="{{.puid}}" value="{{.puid}}">Update</button></form></td> 
    {{end}} 
<table> 

<script> 

function save_data() { 
    var input = document.getElementByID("pid"); 
    localStorage.setItem("id", input.value); 

} 

</script> 

Cependant à chaque fois, peu importe dont le bouton « mise à jour » de ligne de la table que je clique, chaque fois que l'ID du premier élément de ligne de table est de se stocker. Existe-t-il un moyen de générer des identifiants uniques et de les référencer en Javascript lors de la comparaison des données. Merci

Answer 1

Dans la boucle Vous avez

<button class="..." id="pid" name="{{.puid}}" value="{{.puid}}">Update</button> 

ce qui signifie que tous les boutons ont attribut id cinque la même valeur pid. Ceci est un bug car id -s doit être unique dans le document. Et lorsque vous appelez

document.getElementById("pid"); 

le premier élément du id="pid" est correspond retourné. Cela explique pourquoi "seul l'ID du premier élément de ligne du tableau est stocké".

Pour créer id unique pour chaque ligne que vous pouvez utiliser quelque chose comme

{{range $index, $value := .}} 
...<button class="..." id="pid{{$index}}" name="{{$value.puid}}" value="{{$value.puid}}">Update</button>... 
{{end}} 

mais vous avez un problème comment savoir quelle forme a été soumis lorsque votre save_data() événement se déclenche. Pour résoudre ce problème vous pouvez envoyer la forme actuelle ou l'identifiant de ligne comme un paramètre, quelque chose comme

{{range $index, $value := .}} 
<td><form onsubmit="save_data(this, {{$index}})" action="/" method="get">...</form></td> 
{{end}} 

function save_data(form, rowno) { 
    var input = document.getElementById("pid"+rowno); 
    localStorage.setItem("id", input.value); 
}