Fatal编程技术网
  • javascript/
  • Javascript 动态生成的textboxs值总和

Javascript 动态生成的textboxs值总和

javascript html

Javascript 动态生成的textboxs值总和,javascript,html,Javascript,Html,如何计算所有动态生成的文本框的总和 这是我的JavaScript： <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script language="javascript" type="text/javascript"> var i=1; function addRow() { var tbl = docu

如何计算所有动态生成的文本框的总和

这是我的JavaScript：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script language="javascript" type="text/javascript"> 
    var i=1; function addRow() {
      var tbl = document.getElementById('table1');
      var lastRow = tbl.rows.length;
      var iteration = lastRow - 1;
      var row = tbl.insertRow(lastRow);

      var firstCell = row.insertCell(0);
      var el = document.createElement('input');
      el.type = 'text';
      el.name = 'items_' + i;
      el.id = 'items_' + i;

      el.size = 20;
      el.maxlength = 20;
      firstCell.appendChild(el);

      var secondCell = row.insertCell(1);
      var el2 = document.createElement('input');
      el2.type = 'text';
      el2.name = 'stock_' + i;
      el2.id = 'stock_' + i;
       el2.class = 'stock' + i;
      el2.size = 20;
      el2.maxlength = 20;
      secondCell.appendChild(el2);

      var thirdCell = row.insertCell(2);
      var el3 = document.createElement('input');
      el3.type = 'text';
      el3.name = 'unit_rate_' + i;
      el3.id = 'unit_rate_' + i;      el3.class = 'unit_rate' + i;
      el3.size = 20;
      el3.maxlength = 20;
      thirdCell.appendChild(el3);

       var fourthCell = row.insertCell(3);
      var el4 = document.createElement('input');
      el4.type = 'text';
      el4.name = 'per_item_' + i;
      el4.id = 'per_item_' + i;       el3.class = 'per_item' + i;

      el4.size = 20;
      el4.maxlength = 20;
      fourthCell.appendChild(el4);

     // alert(i);
      i++;
      frm.h.value=i;    //   alert(i);   

}//AUTO GNERATE INPUTBOX PRANTHESE var a=1; $().ready(function () {
         $(".stock, .unit_rate" ).on("change", function () {
       $(".unit_rate, .stock").each(function(){          var totalcost = parseFloat($(".unit_rate").val()) / parseFloat($(".stock").val())  ;    $(".per_item").val(totalcost);          });
                 });
          });  


</script>


var i=1；函数addRow（）{
var tbl=document.getElementById（'table1'）；
var lastRow=tbl.rows.length；
var迭代=最后一行-1；
变量行=tbl.insertRow（最后一行）；
var firstCell=row.insertCell（0）；
var el=document.createElement（'input'）；
el.type='text'；
el.name='项目u'+i；
el.id=‘项目’；
el.size=20；
el.maxlength=20；
第一个细胞。追加子细胞（el）；
var secondCell=row.insertCell（1）；
var el2=document.createElement（'input'）；
el2.type='text'；
el2.name='stock_uu'+i；
el2.id=‘股票‘+i；
el2.class=‘股票’+i；
el2.2尺寸=20；
el2.maxlength=20；
第二细胞。附属物子细胞（el2）；
var thirdCell=行插入单元格（2）；
var el3=document.createElement（'input'）；
el3.type='text'；
el3.name=‘单位费率’；
el3.id='单位费率'+i；el3.class='单位费率'+i；
el3.1尺寸=20；
el3.maxlength=20；
第三个细胞。附属物（el3）；
var fourthCell=行插入单元格（3）；
var el4=document.createElement（'input'）；
el4.type='text'；
el4.name='每项.'+i；
el4.id='每项'+i；el3.class='每项'+i；
el4.1尺寸=20；
el4.maxlength=20；
第四细胞。附属物（el4）；
//警报（一）；
i++；
frm.h.value=i；//警报（i）；
}//自动速率输入框PRANTHESE变量a=1$（）准备就绪（功能）{
美元（“.stock，.unit_rate”）。在（“更改”，函数（）{
$（“.unit_rate，.stock”）.each（function（）{.var totalcost=parseFloat（$（“.unit_rate”）.val（））/parseFloat（$（.stock”）.val（）；$（.per_item”）.val（totalcost）；}）；
});
});
这是我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html  xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;  charset=utf-8" /> 
<title>Untitled Document</title></head>

<body> 
<form  action="stocksubmit.php" method="post" name="frm" id="frm"> 
<table width="40%" border="2" cellpadding="0" cellspacing="0" id="table1">   <tr>
<td><strong>ITEMS</strong></td>
<td><strong>STOCK</strong> </td>
<td><strong>UNIT RATE</strong> </td>
<td><strong>PER ITEM</strong> </td>   </tr>  <tr>
<td><input name="items_0" type="text" id="items_0" size="20" class="item" maxlength="20" /></td>
<td><input name="stock_0" type="text" id="stock_0" size="20" class="stock" maxlength="20" /></td>
<td><input name="unit_rate_0" type="text" id="unit_rate_0"  class="unit_rate" size="20"  maxlength="12" /></td>
<td><input name="per_item_0" type="text" id="per_item_0" class="per_item" size="20" maxlength="12" /></td>

</tr>

</table> <input type="button" value="Add" onclick="addRow();" /> <input name="submit"   type="submit" value="submit" /> <label> <input name="h" type="hidden" id="h" value="0" /> </label>  
</form> </body> </html>


无标题文件
项目
股票
单位费率
每项
是您想要的吗

$('#addbutt').click(function() {
    $(":text").each(function(){
        test_asd += parseInt($(this).val());
    });
    alert(test_asd);
});
编辑：

为了证明这一点，可以使用拖放克隆动态添加的元素

可能的重复项，但在我的情况下，我没有$symbol错误。不要像机器人一样看答案，也要看问题。该问题回答了您的问题项目------库存------单价------每项soap------2-----------20------10支铅笔------4------20------5添加按钮------提交按钮添加按钮添加带有空白文本框的新行项目、库存、，“提交”按钮将数据提交到数据库中的单价和每项单价。我想当用户添加两个字段数据（股票和单位价格）。它会自动显示每项字段的值，如每项=库存/单价。谢谢！我不明白，你能编辑一下你的问题并澄清一下吗？谢谢。。。我去解决我的问题，这也是我想要的。。。