動的追加入力の名前値を設定するにはどうすればよいですか？ javascript jquery

Question

私は適用のためのWebページを持っています。このWebページでは、addpボタンをクリックした後に行が動的に追加されます。新しい行をaddPf（）メソッドで正常に追加できます。これらの入力名属性はenName0、enName1、enName2 .....でなければなりませんが、name = "enName" + aDWIで失敗します。ここで

は私のhtmlコードです：ここで

<div> 
<table> 
<tr> 
    <td> 
    <input type="button" id="addP" onclick="addPf()" value="addPeople"> 
    </td> 
</tr> 
<tr> 
    <td> 
    new row added in here; 
    </td> 
</tr> 
</table> 
</div> 

は私のjavascriptのコードです：= "enName" + aDWIがright.Iない

<script> 

var aDWI=0; 
function addPf() 
{ 
    newrow = '<tr><td><input style="width:98%" name="enName"+aDWI></td></tr>'; 
    $(newrow).insertAfter($('#staTable tr:eq('+aDWI+')')); 
    aDWI = aDWI + 1; 
    } 
</script> 

名前は、このことについては考えている、誰がすることができます助けて ？

Answer 1

変更で更新キャラクター。

また、実際には、古い属性のon*イベント属性ではなく、控えめなイベントハンドラを使用する必要があります。また、あなたはこのように、jQueryのappend()を使用してロジックを簡素化することができます。

var aDWI = 0; 
 

 
$('#addP').click(function() { 
 
    newrow = '<tr><td><input style="width:98%" name="enName' + aDWI + '" value="' + aDWI + '"></td></tr>'; 
 
    $('#staTable').append(newrow); 
 
    aDWI = aDWI + 1; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <table id="staTable"> 
 
    <tr> 
 
     <td> 
 
     <input type="button" id="addP" value="addPeople"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     new row added in here; 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

ちょうどあなたが'を使用して、正しく文字列に変数を連結する必要があるため、問題がある

newrow = '<tr><td><input style="width:98%" name="enName"+aDWI></td></tr>'; 

から

newrow = '<tr><td><input style="width:98%" name="enName'+aDWI+'"></td></tr>'; 

Answer 3

へ

<script> 

var aDWI=0; 
function addPf() 
{ 
    newrow = '<tr><td><input style="width:98%" name="enName'+aDWI+'"></td></tr>'; 
    $(newrow).insertAfter($('#staTable tr:eq('+aDWI+')')); 
    aDWI = aDWI + 1; 
} 
</script>