Question

我有一个JavaScript问题，我仍然可以找到解决方法。

我有一个动态形成的表，它包含表单字段。

代码：

      var table = document.getElementById("table");
      var row = table.insertRow(-1);
      var cell1 = row.insertCell(-1); 
      var cell2 = row.insertCell(-1);
      var cell3 = row.insertCell(-1);
      var cell4 = row.insertCell(-1);
      var cell5 = row.insertCell(-1);
      cell1.innerHTML = count; //this is index, set above as var count = 1;

      cell2.innerHTML = name; //this is a variale dynamically generated
      cell3.innerHTML = '<input type="text" name="quantity[]" onchange="addAll()" class="quantity" id="quantity" value="1" data-price="'+price+'" />'
      cell4.innerHTML = price;
      cell5.innerHTML = '<a href="#" onclick="deleteRow('+count+')">Delete</a>';

他将在上面提出类似的内容：

   <input type="text" name="quantity[]" onchange="addAll()" class="quantity" value="1" data-price="4" />
   <input type="text" name="quantity[]" onchange="addAll()" class="quantity" value="34" data-price="5" />
   <input type="text" name="quantity[]" onchange="addAll()" class="quantity" value="12" data-price="8" />

然后我有另一个输入字段，标题为TOTAL

  <input name="total" id="total" />

我想在每次onchange（）之后总是遍历上面的输入表单并进行计算。

 var total = class with quantity[0] * data-price + class with quantity[1] * data-price //and so on for all the input (multiply the input value by the data-price attribute and add all together).

所以我可以把它放在函数中：

 function addAll() {
    //code that returns the total
    document.GetElementById('total').value = total;
 }

我在看jQuery $（＆＃34; className＆＃34;）。每个（function（）但真的很混乱

Answer 1

如果你想访问每个类，下面的jquery会这样做：

var total=0;
$(".quantity").each(function() {
    total=total+$(this).val();
});

＆＃34;。＆＃34;意味着＆＃34;选择类＆＃34;，与css一样。你不能用id做同样的事情因为id是唯一的，所以jquery只会返回第一个元素。

Answer 2

您可以使用以下代码循环显示您的字段：
$（'。quantity'）。每个（函数（）{ //你的计算 }）;

Answer 3

function addAll()
{
   var total = 0;
    $('.quantity).each(function()
    {
         if($(this).attr('name')!='Total')
         {
             var val = $(this).attr('value')
             var dat = $(this).attr('data-price')
             total = total + (val*dat)
         }
     });
     document.GetElementById('total').value = total
 }

Answer 4

我相信这会做你要求的...... 虽然它没有附加到.on('change')事件。您可能想要自己更改一下这部分。祝你好运学习jQuery。

使用jQuery .each()！

var value = 0, price = 0;

$('.quantity').each(function () {
    var val = value += Number($(this).val()),
        data = price += $(this).data('price'),
        total = val * data;

    $('#total').val(total);
});

JSFiddle Example - 你可能想看看......

Answer 5

我认为这是满足您要求的完美代码

$('.quantity').change(function(){
     var total = 0;
     $('.quantity').each(function(index,element){
    total += ( $(element).val())*($(element).prop('data-price'));

     });

     $('#total').val(total);
  });

如何添加具有相同类名的表单的输入字段

5 个答案: