JQuery ячейки таблиц сумма

Question

Сумма ячейки таблицы

<table> 
    <tr> 
     <td><input type="text"></td> 
     <td><input class="price" type="text" value="100"></td> 
     <td><input class="quantity" type="text" value="2"></td> 
     <td><input type="text"></td> 
    </tr> 
    <tr> 
     <td><input type="text"></td> 
     <td><input class="price" type="text" value="100"></td> 
     <td><input class="quantity" type="text" value="5"></td> 
     <td><input type="text"></td> 
    </tr> 
    <tfoot> 
     <tr class="summary"> 
      <td>Total:</td> 
      <td id="total_price"></td> 
      <td id="total_quantity"></td> 
      <td class="second"></td> 
      <td class="third"></td> 
     </tr> 
    </tfoot>  
</table> 


<script> 
    $(document).ready(function() { 
     var sum = 0; 
     var quantity = 0; 
     $('.price').each(function() { 
      sum += (parseInt($('.price').val()) * parseInt($('.price').val())); 
      quantity += parseInt($('.quantity').val(); 
     }); 

     $('#total_price').html(sum); 
     $('#total_quantity').html(quantity); 
    }) 
</script> 

Выход должен быть: Общая сумма: 700; Общее количество: 7

Answer 1

Изменить $('.price') на $(this), чтобы передать элемент внутри обратного вызова.

$(document).ready(function() { 
    var sum = 0; 
    var quantity = 0; 
    $('.price').each(function() { 
     var price = $(this); 
     var q = price.closest('tr').find('.quantity').val(); 
     sum += parseInt(price.val()) * parseInt(q); 
     quantity += parseInt(q); 
    }); 

    $('#total_price').html(sum); 
    $('#total_quantity').html(quantity); 
}); 

Fiddle Demo

Answer 2

Использование $(this) в $.each() как,

$('.price').each(function() { 
    sum += (parseInt($(this).val())*parseInt($(this).val())); 
    quantity += parseInt($this.closest('tr').find('.quantity').val(); 
}); 

Answer 3

Ваш код содержит ошибки синтаксиса.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var sum = 0; 
     var quantity = 0; 
     $('.price').each(function() { 
      sum += (parseInt($('.price').val(), 10)*parseInt($('.price').val(), 10)); 
      quantity += parseInt($('.quantity').val(), 10); 
     }); 

     $('#total_price').html(sum); 
     $('#total_quantity').html(quantity); 
    }) 
</script> 

Answer 4

попробовать это, используя индекс каждого метода,

var sum = 0; 
var quantity = 0; 
$('.price').each(function(i){ 
    sum += $('.price')[i].value * $('.quantity')[i].value; 
    quantity += $('.quantity')[i].value * 1; 
}); 
$('#total_price').html(sum); 
$('#total_quantity').html(quantity); 

здесь это на Fiddle

Answer 5

Исправьте вы Jquery к этому:

var sum = 0; 
var quantity = 0; 
$('.price').each(function (i) { 
    sum += $('.price')[i].value * $('.quantity')[i].value; 
    quantity += $('.quantity')[i].value * 1; 
}); 
$('#total_price').html(sum); 
$('#total_quantity').html(quantity); 

FIDDLE:http://jsfiddle.net/ekzWJ/1/

Answer 6

Я использовал концепцию родительского класса, чтобы получить значение количества. теперь это работает найти попробовать.

$(document).ready(function(){ 
    var sum = 0; 
    var quantity = 0; 
    var singleProduct,singleQuantity; 

    $('.price').each(function() { 
     singleProduct = parseInt($(this).val()); 
     console.log(singleProduct); 
     singleQuantity = parseInt($(this).parent().parent().find('.quantity').val()); 


     sum = sum+(singleProduct*singleQuantity); 
     quantity = quantity+singleQuantity; 
    }); 
    console.log(sum+"-"+quantity); 
    $('#total_price').html(sum); 
    $('#total_quantity').html(quantity); 

});