калькулятор jquery
Доброго времени суток. Не могу понять, почему не происходит умножение.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.str').on("keyup",".quantity",".price",function(){
var kol = $("input[name='quantity']",'.quantity').val();
var price = $("input[name='price']",'.price').val();
var sum = $("input[name='sum']",'.sum').val();
var result = kol * price;
if(!isNaN(result)){
sum.val(result);
}
});
});
</script>
</head>
<body><table class='table'>
<tr class='str'><td><input name='quantity' class='quantity' type='text'></td><td><input name='price' class='price' type='text'></td><td><input name='sum' class='sum' type='text'></td></tr>
</table>
</body>
</html>
Должно происходить по событию keyup. |
Цитата:
Как вариант
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.str').on("keyup",".quantity, .price",function(){
var o=$(this.parentNode.parentNode);
var kol = o.find('.quantity').val();
var price = o.find('.price').val();
var result = kol * price;
if (!isNaN(result)) {
o.find('.sum').val(result);
};
});
});
</script>
</head>
<body><table class='table'>
<tr class='str'><td><input name='quantity' class='quantity' type='text'></td><td><input name='price' class='price' type='text'></td><td><input name='sum' class='sum' type='text'></td></tr>
</table>
</body>
</html>
|
ksa,
o=$(this.parentNode.parentNode); не
o=$(this).parents("tr")
? или
o=$(this).parents(".str")
|
Почему то вспомнилось это.
|
Спасибо. Действительно бред был ))
Не скажите еще, как можно сложить все результаты строк? То есть если <tr class='str'><td><input name='quantity' class='quantity' type='text'></td><td><input name='price' class='price' type='text'></td><td><input name='sum' class='sum' type='text'></td></tr>таких строк 10, например. То как сложить все input class=sum? |
Officeoff.ru,
обойти циклом этот класс |
Цитата:
и вариант для медитации http://javascript.ru/forum/dom-window/45148-kak-sdelat-takojj-kalkulyator-pri-uslovii-chto-tovarov-mozhet-byt-80-100-a.html#post298023 |
Цитата:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.str').on("keyup",".quantity, .price, .discount, .sum" ,function(){
var o=$(this.parentNode.parentNode);
var kol = o.find('.quantity').val();
var price = o.find('.price').val();
var discount = o.find('.discount').val();
var result = kol * price;
if (discount.length>0){
var discount = result / 100 * discount;
var result = result - discount;
}
if (!isNaN(result)) {
var result = Math.floor(result*100)/100
o.find('.sum').val(result);
}
$(".sum").each( function () {
allsum += parseInt( $(this).text(), 10 );
});
alert(allsum);
});
});
</script>
</head>
<body><table class='table'>
<tr class='str'><td><input name='quantity' class='quantity' type='text'></td><td><input name='price' class='price' type='text'></td><td><input name='discount' class='discount' type='text'></td><td><input name='sum' class='sum' type='text'></td></tr>
<tr class='str'><td><input name='quantity' class='quantity' type='text'></td><td><input name='price' class='price' type='text'></td><td><input name='discount' class='discount' type='text'></td><td><input name='sum' class='sum' type='text'></td></tr>
<tr class='str'><td><input name='quantity' class='quantity' type='text'></td><td><input name='price' class='price' type='text'></td><td><input name='discount' class='discount' type='text'></td><td><input name='sum' class='sum' type='text'></td></tr>
<tr class='str'><td colspan='3'></td><td><input class='allsum' type='text'></td></tr>
</table>
</body>
</html>
Написал такую фигню. В итоге allsum = NaN |
Officeoff.ru,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.str').on("keyup",".quantity, .price, .discount, .sum" ,function(){
var o=$(this.parentNode.parentNode);
var kol = o.find('.quantity').val();
var price = o.find('.price').val();
var discount = o.find('.discount').val();
var result = kol * price;
if (discount.length>0){
var discount = result / 100 * discount;
var result = result - discount;
}
if (!isNaN(result)) {
var result = Math.floor(result*100)/100
o.find('.sum').val(result);
}
var allsum = 0;
$(".sum").each( function () {
allsum += +(parseFloat($(this).val())||0).toFixed(2);
});
$('.allsum').val(allsum);
});
});
</script>
</head>
<body><table class='table'>
<tr class='str'><td><input name='quantity' class='quantity' type='text'></td><td><input name='price' class='price' type='text'></td><td><input name='discount' class='discount' type='text'></td><td><input name='sum' class='sum' type='text'></td></tr>
<tr class='str'><td><input name='quantity' class='quantity' type='text'></td><td><input name='price' class='price' type='text'></td><td><input name='discount' class='discount' type='text'></td><td><input name='sum' class='sum' type='text'></td></tr>
<tr class='str'><td><input name='quantity' class='quantity' type='text'></td><td><input name='price' class='price' type='text'></td><td><input name='discount' class='discount' type='text'></td><td><input name='sum' class='sum' type='text'></td></tr>
<tr class='str'><td colspan='3'></td><td><input class='allsum' type='text'></td></tr>
</table>
</body>
</html>
|
рони, спасибо.
Сделал немного по другому, т.к. нужны были знаки после точки
var allsum = 0
$(".sum").each( function () {
allsum += Math.floor($(this).val()*100)/100;
});
$('.allsum').val(allsum);
|
| Часовой пояс GMT +3, время: 02:02. |