0

我有下表：

<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 结尾。

你如何解决这个问题？

我也完全错误地接近这个吗？有没有更好的方法来实现这一目标？

4

7 回答 7

7

你可以简单地把它变成一个 or 子句：

var total = 0;

$('input').each(function() {
    total += (+$(this).val() || 0);
});

alert(total);

记住： +$(this).val()是parseInt( $(this).val() ). 尽管这很方便，但它遇到了与 ; 相同的问题parseInt。即，如果字符串以 a 开头0，则将其解析为 base 8： parseInt("033"); // 27 +"033"; // 27 要绝对确定不会发生这种情况，请使用parseInt以 10 为底的：parseInt("033", 10); // 33 所以，在我们的上下文中，你会使用这个： total += ( parseInt( $(this).val(), 10 ) || 0 );

于 2012-07-11T23:22:37.447 回答
2

尝试这个：

$('#mybutton').click(function () {
   var sum = 0;  
    $('input').each(function(){
       var val = parseInt(this.value, 10)
       if (isNaN(val)) { val = 0 }
       sum += val
    })
});

演示

于 2012-07-11T23:23:25.927 回答
2

请试试这个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" />
于 2012-07-11T23:25:46.930 回答
1

在您的代码中，将parseInt($('#sixthinput').val())'s 更改为parseInt($('#sixthinput').val() || 0). 这样，如果输入为空，则返回 0，如果输入无效，则返回 NaN。

于 2012-07-11T23:21:49.213 回答
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()可靠地检查值是否不是数字。

上面为了简单起见，我已将其添加到函数中。

于 2012-07-11T23:25:11.240 回答
1 
$('#myButton').click(function() {
    var sum = 0;
    $('table input').each(function(){
        val = parseInt($(this).val(),10);
        sum += isNaN(val) ? 0 : val;
    }
    alert(sum);
}

确保在调用中包含 10 的基数，以便parseInt正确解析。0809

于 2012-07-11T23:25:45.440 回答
0

NaN是假的，因此如果第一个为假，您可以使用 or 运算符 ( ||) 返回第二个值。

$(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 );
        });
});
于 2012-07-11T23:21:42.590 回答