計算で列を動的に追加したい前の列jQuery

Question

こんにちは私はデータを取得して、下の画像のような表に置くポップアップビューを持っています。

QTY入力テキストを編集する場合の主なタスクは、たとえばこれを200にした後に、この列の隣に新しい列が追加され、残りの値が保持されるということですたとえば、最初の500を200に変更すると、次の列に（500-200）= 300と表示され、下の画像のように変化し続けます。次のようなものを作成しようとしています。私はblurイベントを使用していますが、新しい列がない変更の列の後、最後に作成されており、 私のサンプルコードは

以下のようなものである第二の画像に私はショーvalues.likeを計算することはできません

<table border="1" cellspacing="0"> 
    <tr> 
    <th><input class='check_all' type='checkbox' onclick="select_all()"/></th> 
    <th>S. No</th> 
    <th>First Name</th> 
    <th>Last Name</th> 
    <th>Tamil</th> 
    <th>English</th> 
    <th>Computer</th> 
    <th>Total</th> 
    </tr> 
    <tr> 
    <td><input type='checkbox' class='case'/></td> 
    <td>1.</td> 
    <td><input type='text' id='first_name' name='first_name[]'/></td> 
    <td><input type='text' id='last_name' name='last_name[]'/></td> 
    <td><input type='text' id='tamil' name='tamil[]'/></td> 
    <td><input type='text' id='english' name='english[]'/> </td> 
    <td><input type='text' id='computer' name='computer[]'/></td> 
    <td><input type='text' id='total' name='total[]'/> </td> 
    </tr> 



</table> 

<button type="button" class='delete'>- Delete</button> 
<button type="button" class='addmore'>+ Add More</button> 
<p> 
<input type='submit' name='submit' value='submit' class='but'/></p> 

****Javascript code** 

    var i=2; 
    $("#last_name").blur(function(){ 
    var data="<tr><td><input type='checkbox' class='case'/></td><td>"+i+". 
    </td>"; 
    data +="<td><input type='text' id='first_name"+i+"' 
    name='first_name[]'/></td> <td><input type='text' id='last_name"+i+"' 
    name='last_name[]'/></td><td><input type='text' id='tamil"+i+"' 
    name='tamil[]'/></td><td><input type='text' id='english"+i+"' 
    name='english[]'/></td><td><input type='text' id='computer"+i+"' 
    name='computer[]'/></td><td><input type='text' id='total"+i+"' 
    name='total[]'/></td></tr>"; 
    $('table').append(data); 
    i++; 
    }) 

私は$（「テーブル」）を置き換える行の後に追加するには必要な.Thanksに

Answer 1

を助ける画像による私の質問を明確に願っています。

whith（データ）を追加あなたは、元のを維持するために、1行目のonchangeイベントを使用する必要が差分を計算するには

var i=2; 
 
var addRow = function(){ 
 
    var data="<tr><td><input type='checkbox' class='case'/></td><td>"+i+". </td>"; 
 
    data +="<td><input type='text' name='first_name[]'/></td> <td><input type='text' name='last_name[]'/></td><td><input type='text' name='tamil[]'/></td><td><input type='text' name='english[]'/></td><td><input type='text' name='computer[]'/></td><td><input type='text' name='total[]'/></td></tr>"; 
 
    $(data).insertAfter($(this).closest('tr'))  
 
    i++; 
 
} 
 

 
$(document).on('blur', 'input[name="last_name[]"]', addRow)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table border="1" cellspacing="0"> 
 
    <tr> 
 
    <th><input class='check_all' type='checkbox' onclick="select_all()"/></th> 
 
    <th>S. No</th> 
 
    <th>First Name</th> 
 
    <th>Last Name</th> 
 
    <th>Tamil</th> 
 
    <th>English</th> 
 
    <th>Computer</th> 
 
    <th>Total</th> 
 
    </tr> 
 
    <tr> 
 
    <td><input type='checkbox' class='case'/></td> 
 
    <td>1.</td> 
 
    <td><input type='text' name='first_name[]'/></td> 
 
    <td><input type='text' name='last_name[]'/></td> 
 
    <td><input type='text' name='tamil[]'/></td> 
 
    <td><input type='text' name='english[]'/> </td> 
 
    <td><input type='text' name='computer[]'/></td> 
 
    <td><input type='text' name='total[]'/> </td> 
 
    </tr> 
 

 

 

 
</table> 
 

 
<button type="button" class='delete'>- Delete</button> 
 
<button type="button" class='addmore'>+ Add More</button> 
 
<p> 
 
<input type='submit' name='submit' value='submit' class='but'/></p>

（））

以下のデモなど

$（データ）.insertAfter値（変更前）。ぼかしより、行を追加するときに、元の保存された値と実際の値との差を計算してください