自动计算总值答案

【问题标题】：auto calculate total value自动计算总值
【发布时间】：2011-01-29 12:34:13
【问题描述】：

我的表格如图所示

我需要的是，当我输入/更改金额时，它会自动计算底部的总和

我也不想让添加任何字符...

谢谢

【问题讨论】：

标签： javascript jquery

【解决方案1】：

编辑这个效果更好：

$('.amount').keyup(function() {
    var result = 0;
    $('#total').attr('value', function() {
        $('.amount').each(function() {
            if ($(this).val() !== '') {
                result += parseInt($(this).val());
            }
        });
        return result;
    });
});

你可以在这里试试：http://jsfiddle.net/G5yaK/

$('.amount').change(function() {
    $('#total').attr('value', function() {
        var result = 0;
        $('.amount').each(function() {
            result += $(this).attr('value');
        });
        return result;
    });
});

您必须在输入字段中添加class="amount"，在最后一个字段中添加id="total"

【讨论】：

1) 你必须使用 parseInt()，2) 如果 val 为空，你不能将它添加到结果中 3) 使用 $(this).val() 而不是 $(this)。 attr('值')。

【解决方案2】：

将class="calc" 添加到您的每个金额输入字段，并将id="total" 添加到您的总结果元素。

jQuery 代码：

$(document).ready(function(){
    $('.calc').change(function(){
        var total = 0;
        $('.calc').each(function(){
            if($(this).val() != '')
            {
                total += parseInt($(this).val());
            }
        });
        $('#total').html(total);
    });
})(jQuery);

和一个示例 HTML 代码：

<input type="text" class="calc" value="">
<input type="text" class="calc" value="">
<input type="text" class="calc" value="">
<input type="text" class="calc" value="">
<input type="text" class="calc" value="">

<span id="total"></span>

【讨论】：

【解决方案3】：

演示：http://jsfiddle.net/merakli/vxXCK/4/

<!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"  xml:lang="tr" lang="tr" dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<style type="text/css">
<!-- 
html,body,div,span,h1,h2,h3,p,hr,br,img,form,input,ul,li,a {
 margin:0;
 padding:0;
 border:0;
}
ul li {list-style:none;}
body {
 font-family:Helvetica, Arial, Tahoma, sans-serif;
 font-size:13px;
 color:#444;
 line-height:1.5em;
} 
#kapsayici {
background:#fff;
margin:10px auto;
width:960px;
border:1px solid #dfdfdf;
min-height: 700px;
}
input {
border:1px solid #dfdfdf;
}
-->
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>
<script type="text/javascript">
$.fn.fonkTopla = function() {
var toplam = 0;
this.each(function() {
   var deger = fonkDeger($(this).val());
   toplam += deger;
});
return toplam;
};


function fonkDeger(veri) {
    return (veri != '') ? parseInt(veri) : 0;
}

$(document).ready(function(){
$('input[name^="fiyat"]').bind('keyup', function() {
   $('#toplam').html( $('input[name^="fiyat"]').fonkTopla());
});
});
</script>
</head>
<body>
<div id="kapsayici">

 <ul>
  <li><input type="text" name="fiyat[]" /></li>
  <li><input type="text" name="fiyat[]" /></li>
  <li><input type="text" name="fiyat[]" /></li>
  <li><input type="text" name="fiyat[]" /></li>
  <li><input type="text" name="fiyat[]" /></li>
 </ul>
Toplam: <span id="toplam"></span>

</div>
</body>
</html>

【讨论】：