在jquery中将输入中的值一起添加

时间:2012-07-11 23:18:53

标签: jquery

我有下表:

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

你如何解决这个问题?

我是否接近这个完全错误?有没有更好的方法来实现这一目标?

7 个答案:

答案 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
    })
});

DEMO

答案 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的基数,以便0809正确解析。

答案 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 );
        });
});