动态生成的文本框值总和

时间:2014-09-26 07:40:31

标签: 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 = 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>

这是我的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>

1 个答案:

答案 0 :(得分:1)

this是你想要的吗?

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

修改

Link证明这适用于使用拖放和克隆动态添加的元素