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

Question

I have a JavaScript problem which i still can find a way out with.

I have a table which is been formed dynamically and it contains form fields.

code:

      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>';

he above will come up with something like:

   <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" />

I then have another input field with lable TOTAL

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

I want to always loop through the input form above after every onchange() and do a calculation.

 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).

so i can put it in the function:

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

Im looking at jQuery $("className").each(function () but really confuse

Answer 1

If you want to visit each of a class, the following jquery would do it:

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

The "." means "select the class", like with css. You can't do the same with id's because id's are meant to be unique, so jquery will return only the first element.

Answer 2

You can use below code to loop through your fields:
$('. quantity'). each(function(){ //your calculation }) ;

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

I believe this will do what you're asking for... Although it is not attached to .on('change') event. You may want to change that part a bit yourself. Good luck learning jQuery.

jQuery .each() is used!

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 - You may want to take a look...

Answer 5

I think this is perfect code for your requirement

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

     });

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