想通过计算前一列动态添加列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原始保存的值和实际值