我有下表:
<table>
<thead>
<tr>
<th></th>
<th>Female</th>
<th>Male</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rising 1</td>
<td>
<input id="firstinput" />
</td>
<td>
<input id="secondinput" />
</td>
</tr>
<tr>
<td>Rising 2</td>
<td>
<input id="thirdinput" />
</td>
<td>
<input id="fourthinput" />
</td>
</tr>
<tr>
<td>2+</td>
<td>
<input id="fifthinput" />
</td>
<td>
<input id="sixthinput" />
</td>
</tr>
</tbody>
</table>
我想将这些输入中的所有值一起添加并显示它们的值:
$(document).ready(function () {
$('#mybutton').click(function () {
alert(parseInt($('#firstinput').val()) +
parseInt($('#secondinput').val()) +
parseInt($('#thirdinput).val()) +
parseInt($('#fourthinput').val()) +
parseInt($('#fifthinput).val()) +
parseInt($('#sixthinput').val()));
});
});
这只适用于表格中存在所有值的情况。如果一个人是空的,最后是NaN。
你如何解决这个问题?
我是否接近这个完全错误?有没有更好的方法来实现这一目标?
答案 0 :(得分:7)
你可以简单地把它变成一个或子句:
var total = 0;
$('input').each(function() {
total += (+$(this).val() || 0);
});
alert(total);
请记住: +$(this).val()
是parseInt( $(this).val() )
的快捷方式。虽然这很方便,但它遇到的问题与parseInt
相同;即,如果字符串以0
开头,则将其解析为基础8
:parseInt(“033”); // 27 +“033”; // 27为了绝对确定没有发生,请使用parseInt
与基数10:parseInt(“033”,10); // 33因此,在我们的上下文中,你使用它:total + =(parseInt($(this).val(),10)|| 0); 德尔>
答案 1 :(得分:2)
试试这个:
$('#mybutton').click(function () {
var sum = 0;
$('input').each(function(){
var val = parseInt(this.value, 10)
if (isNaN(val)) { val = 0 }
sum += val
})
});
答案 2 :(得分:2)
Plz尝试 Workingdemo http://jsfiddle.net/SmRXL/4/ 或 http://jsfiddle.net/SmRXL/3/
你可以使用类并迭代它并将它们全部加起来。
休息演示会有所帮助,`:)
<强>码强>
$(function() {
$('#foo').click(function() {
var total = 0;
$('.hulk').each(function() {
if ($(this).val() > 0) total += parseInt($(this).val());
});
alert(" TOTAL is => " + total);
});
});
<强> HTML 强>
<table>
<thead>
<tr>
<th></th>
<th>Female</th>
<th>Male</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rising 1</td>
<td>
<input class="hulk" id="firstinput" />
</td>
<td>
<input class="hulk" id="secondinput" />
</td>
</tr>
<tr>
<td>Rising 2</td>
<td>
<input class="hulk" id="thirdinput" />
</td>
<td>
<input class="hulk" id="fourthinput" />
</td>
</tr>
<tr>
<td>2+</td>
<td>
<input class="hulk" id="fifthinput" />
</td>
<td>
<input class="hulk" id="sixthinput" />
</td>
</tr>
</tbody>
</table>
<input type="button" id="foo" value="TOTAL ME" />
答案 3 :(得分:1)
在您的代码中,将parseInt($('#sixthinput').val())
更改为parseInt($('#sixthinput').val() || 0)
。这样,如果它为空,它将返回0,如果输入无效,则返回NaN。
答案 4 :(得分:1)
$("#mybutton").click(function(){
alert(addValues($("input")));
});
function addValues(selector){
var total = 0;
selector.each(function(){
var thisVal = parseInt($(this).val());
if(!isNaN(thisVal)) total += thisVal;
});
return total;
}
使用isNaN()来可靠检查某个值是否不是数字。
以上我为了简单起见将其添加到函数中。
答案 5 :(得分:1)
$('#myButton').click(function() {
var sum = 0;
$('table input').each(function(){
val = parseInt($(this).val(),10);
sum += isNaN(val) ? 0 : val;
}
alert(sum);
}
请务必在parseInt
的来电中加入10的基数,以便08
和09
正确解析。
答案 6 :(得分:0)
NaN
是假的,因此如果第一个值为false,您可以使用或运算符(||
)返回第二个值。
$(document).ready(function () {
$('#mybutton').click(function () {
alert(parseInt($('#firstinput').val()) || 0 +
parseInt($('#secondinput').val()) || 0 +
parseInt($('#thirdinput').val()) || 0 +
parseInt($('#fourthinput').val()) || 0 +
parseInt($('#fifthinput').val()) || 0 +
parseInt($('#sixthinput').val()) || 0 );
});
});