Impostazione attributo id dinamicamente distinto utilizzando javascript per l'elemento input

Question

Sono di fronte a un problema nell'impostazione di ID distinti per caselle di input aggiunte dinamicamente in una tabella. Il problema è:

Sto inserendo nuove righe quando l'utente fa clic su "Aggiungi nuova riga". Ora devo impostare un ID distinto per la casella di input. Ho preso una variabile statica e aumentando il suo valore ogni volta che l'utente fa clic su Aggiungi nuovo pulsante di riga. Quindi aggiungo il suo valore al valore id, diciamo temp (cioè, gli ID saranno temp1, temp2 e così via). Ho preso una variabile xyz come var xyz = "temp" + i (dove sono il contatore) e ora devo assegnare xyz all'id utilizzando setattribute. Ma come valori in setattribute possono essere solo letterali, come posso utilizzare una variabile al posto del valore?

Se si dispone di altri metodi, per favore fatemelo sapere.

Answer 1

Può essere una variabile che contiene anche una stringa.

var fooId = "foo"; 
for (var i = 0; i <= 2; i++) { 
    document.getElementsByTagName('div')[i].setAttribute('id', fooId + (i + 1)); 
} 

Live DEMO

Answer 2

setAttribute permette di variabili da utilizzare come parametro value.

esempio:

var ele = document.createElement('div') 
var id = 'temp1' 
ele.setAttribute('id', id) 

si tradurrebbe in:

<div id="temp1"></div> 

Answer 3

element.setAttribute("id", xyz); Dove elemento è il vostro input.

Answer 4

Prima di tutto setattribute è una proprietà non definita di un elemento a causa della distinzione tra maiuscole e minuscole, mentre, ovviamente, è disponibile setAttribute.

In secondo luogo, non è assolutamente necessario utilizzare setAttribute. Si può semplicemente modificare la proprietà id per ottenere lo stesso effetto:

var el = document.createElement('div'), // your element 
    staticPart = 'myUniqId', // your static part of a unique id 
    i = 0; // your uniqueness 

el.id = staticPart + i; // assign unique id to the element 
// el.setAttribute('id', staticPart + i); // does the same, but more verbose 

// Let's check if it worked: 
el.getAttribute('id'); // "myUniqId0" 
el.id; // "myUniqId0" 

In terzo luogo, dove hai visto che i valori

in setAttribute possono essere solo letterali

le specifiche dice che setAttribute accetta due parametri, name e value di tipo DOMstring. Puoi passarlo qualsiasi valore tu voglia. Mente che verrà convertito in stringa:

el.id = {a: 'b'}; 
el.id; // "[object Object]" 

Vedi http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082 e https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute

Answer 5

for(;i<7;i++) 
      {document.getElementById("test").innerHTML +='<form id="form'+f+++'" method="get"><input type="text" id="in'+i+++'" size="12%"><input type="text" id="in'+i+++'" size="12%" ><input type="text" id="in'+i+++'"size="12%"><input type="text" id="in'+i+++'"size="10%" ><input type="text" id="in'+i+++'"size="10%"><input type="text" id="in'+i+++'" size="10%"><input type="text" id="in'+i+++'"size="12%"></form>'  
      }