Question

我的表格如图所示

enter image description here

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

我也不想让任何角色添加......

由于

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

Answer 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>

希望有所帮助;）

Answer 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>

自动计算总价值

3 个答案:

您可以在此处尝试：http://jsfiddle.net/G5yaK/