要素のIDを変数として設定するにはどうすればよいですか？

Question

私はテーブルにいくつかの行を追加するいくつかのjQueryスクリプトを持っています（ユーザがボタンを押すと）。私の問題は、行内の要素のidを動的に変更したいということです。テーブル内のいくつかの要素にIDとして設定したグローバル変数iを設定しました。問題はいくつかのデバッグの後に私がidが全く変わらず、文字0のままであることが分かりました（変数iが0に設定されておらず、ユーザがボタンを押すたびに増加します）。何か案は？

var i=0; 
var a1=i.toString().concat("1"); 
var a2=i.toString().concat("2"); 
var a3=i.toString().concat("3"); 
$("#table1").append("<tr><td><center><input id=\"a1\"></input></center></td><td> 
center><button id=\"a2\">Load</button></center></td><td ><img id=\"a3\"></td> 
</tr>"); 

$("#a2").click(function(){ 
    $z=$("#a1").val(); 
    $("#a3").attr("src",$z); 
    i++; 
}); 

Answer 1

これは、それらを直接文字列として記述するためです。それらを実際の文字列に連結する必要があります。 +を使用して文字列を連結することができます。

$("#table1").append(
    "<tr>" + 
    "<td>" + 
     "<center><input id=\"" + a1 + "\" /></center>" + 
    "</td>" + 
    "<td>" + 
     "<center><input id=\"" + a2 + "\" /></center>" + 
    "</td>" + 
    "<td>" + 
     "<center><input id=\"" + a3 + "\" /></center>" + 
    "</td>" + 
    "</tr>" 
); 

価値があるのは、<center> tag is deprecatedです。使用しないでください。 JavaScriptを直接文字列としてHTMLを生成するのではなく、何らかの種類のテンプレートを作成することも考えられます。