想通過計算前一列動態添加列jQuery

Question

你好，我有一個彈出式視圖，在這裏我獲取數據並將其放置在如下圖所示的表格中。

這些是QTY字段中的值。主要任務是當我編輯數量輸入文本時，例如我將這個值設置爲200，然後在該列後面會添加一個新列，並保留剩餘值。例如初始500，更改爲200，然後下一列將顯示（500-200）= 300，它會繼續，因爲我不斷變化，像下面的圖像。我試圖做出像下面的一樣。

我使用模糊事件，但在新列的更改列後不產生最後並不能計算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

要行後追加替換$（「表」）。追加（數據）蒙山

$（數據）.insertAfter作爲演示如下

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>

（））

要計算你必須使用在第一行onchange事件保持原有的差異值（更改前）。比模糊，添加行時，計算差異beetwwhen原始保存的值和實際值