jqueryテーブルに動的にテーブルを追加/追加

Question

次のJSfiddleを使用していますが、うまくいきます。唯一の懸念は、私は、ダイナミックなフィールド名を作成することができません、ある

誰かが私が

http://jsfiddle.net/k166m6m6/913/

コードここで間違ってやっているものを導くことができる：

<div> 
     <input type="button" value="Add" class="plusbtn" /> 
     <input type="button" value="Remove" class="minusbtn" /> 
</div> 

<table width="50%" border="1" cellpadding="1" cellspacing="1" class="test"> 
    <tr> 
    <td>Name</td> 
    <td>Emp no.</td> 
    <td>Company</td> 
    <td>Mobile no.</td> 
    </tr> 
    <tr> 
    <td><input type="text" class="txtbox" value="" /></td> 
    <td><input type="text" class="txtbox" value="" /></td> 
    <td><input type="text" class="txtbox" value="" /></td> 
    <td><input type="text" class="txtbox" value="" /></td> 
    </tr> 
</table> 

jqueryのコード

$('.plusbtn').click(function() { 
     var cnt = 1; 
     $(".test").append('<tr><td><input type="text" class="txtbox" name="txtnamed'+cnt+'" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td></tr>'); 
     cnt++; 
    }); 
    $('.minusbtn').click(function() { 
     if($(".test tr").length != 2) 
      { 
       $(".test tr:last-child").remove(); 
      } 
     else 
      { 
       alert("You cannot delete first row"); 
      } 
    }); 

Answer 1

あなたは毎回cntを再宣言しますそれはクリック機能の中にあるのでクリックします。これは関数スコープ内にあることを意味し、クリックごとに1にリセットされます。

var cnt = 1; 
 

 
$('.plusbtn').click(function() { 
 
    $(".test").append('<tr><td><input type="text" class="txtbox" name="txtnamed' + cnt + '" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td></tr>'); 
 
    cnt++; 
 
}); 
 
$('.minusbtn').click(function() { 
 
    if ($(".test tr").length != 2) { 
 
    $(".test tr:last-child").remove(); 
 
    } else { 
 
    alert("You cannot delete first row"); 
 
    } 
 
});

.txtbox { 
 
    border: none; 
 
    width: 100%; 
 
} 
 
input { 
 
    font-size: 17px; 
 
    height: 30px; 
 
} 
 
table { 
 
    background: none repeat scroll 0 0 #abcdef; 
 
    border: 1px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="button" value="Add" class="plusbtn" /> 
 
    <input type="button" value="Remove" class="minusbtn" /> 
 
</div> 
 

 
<table width="50%" border="1" cellpadding="1" cellspacing="1" class="test"> 
 
    <tr> 
 
    <td>Name</td> 
 
    <td>Emp no.</td> 
 
    <td>Company</td> 
 
    <td>Mobile no.</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" class="txtbox" value="" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="txtbox" value="" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="txtbox" value="" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="txtbox" value="" /> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

「CNT」があなたのクリック機能var cnt = 1;の中で宣言されているので、すべてのクリックでリセットを取得している：それは再宣言することはないだろうと、それはクリックでリセットされないように外にそれを移動します。あなたの機能の外に移動してください。その範囲は、関数であるため、関数の外CNT変数は、CNTが常につもり一つであるされてhttp://jsfiddle.net/k166m6m6/917/