Question

您好我有一个弹出视图，我在其中获取数据并将其放在如下图所示的表格中。

是QTY字段中的值。主要任务是当我编辑QTY输入文本时，例如我将其设为200，然后在此列之后将添加一个新列，并保留剩余值。示例初始500，更改为200然后下一列将显示（500-200）= 300，并且它将继续，因为我不断变化如下图像。我试图制作类似下面的一个。

我正在使用模糊事件，但是新列最后没有在更改列之后创建并且无法计算值。就像我在第二张图片中显示的那样我的示例代码如下所示

 <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++;
    })

我希望通过所需的图片帮助我明白我的问题。谢谢

Answer 1

在行之后追加$（'table'）。append（data）whith

$（data）.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事件来保留原始值（在更改之前）。在模糊时，添加行时，计算原始保存值和实际值之间的差异

想要通过计算前一列jQuery动态添加列

1 个答案: