入力要素にjavascriptを使用して動的に異なるid属性を設定する

Question

動的に追加された入力ボックスの異なるIDをテーブルに設定する際に問題があります。 問題は次のとおりです。

ユーザーが[新しい行を追加]をクリックすると、新しい行が挿入されます。今度は、入力ボックスに別のIDを設定する必要があります。私は静的変数を取って、ユーザーが新しい行ボタンを追加するたびにその値を増やしています。次に、id値にその値を追加してtemp（つまりIDはtemp1、temp2などとなります）を追加します。私は var xyz = "temp" + i（ここで私はカウンタです） として変数xyzを取ったので、今度はsetattributeを使ってIDにxyzを割り当てなければなりません。 しかし、setattributeの値はリテラルでしかないので、値の代わりに変数を使用するにはどうすればよいですか？

その他の方法がある場合は、お知らせください。

Answer 1

文字列も保持する変数にすることができます。

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

Live DEMO

setAttribute

Answer 2

変数は値パラメータとして使用することを可能にします。

例：要素があなたの入力し

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

Answer 3

element.setAttribute("id", xyz);：

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

がもたらすであろう。

Answer 4

最初にsetattributeは、大文字と小文字の区別のために要素の未定義のプロパティですが、setAttributeは利用可能です。

第2に、必ずしもsetAttributeを使用する必要はありません。

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" 

第三に、あなたは、setAttributeメソッドで

値が唯一の仕様は言うリテラル

ことができることがわかりました。あなたは、単に非常に同じ効果を達成するためにidプロパティを変更することができますは、のnameとvalueの2つのパラメータを受け入れます。あなたはそれをあなたが望む任意の値にすることができます。それは文字列に変換されますことを心：

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

は、それは同様に、文字列を保持する変数することができhttp://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082と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>'  
      }