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()));
        });
});

これは、すべての値がテーブルに存在する場合にのみ機能します。1つが空の場合、NaNになります。

これをどのように回避しますか？

また、私はこれに完全に間違ってアプローチしていますか？これを達成するためのより良い方法はありますか？

4

7 に答える 7

7

あなたは単にそれをor節に変えることができます：

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）;

于 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

PlzはこのWorkingdemohttp : //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できるように08してください。09

于 2012-07-11T23:25:45.440 に答える
0

NaNはfalseであるため、or演算子（||）を使用して、最初の値がfalseの場合に2番目の値を返すことができます。

$(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 に答える