TD入力値が以前のTD値を超えていないことを確認してください

Question

私は学校プロジェクトのためにJQueryを学習しています。

私は残高を示すテーブルと、ユーザーが残高を支払うために自分の金額を入力する入力ボックスを持っています。ユーザーが金額を入力しているとき、金額以上の金額を望んでいません。ここで私はこれまで持っているものです。

HTML：

<table> 
    <tr class="arow"> 
     <td class="balance"> 
      20.00 
     </td> 
     <td class="otheramount"> 
      Other Amount: <input class="forminput" type="number"> 
     </td> 
    </tr> 
    <tr class="arow"> 
     <td class="balance"> 
      30.00 
     </td> 
     <td class="otheramount"> 
      Other Amount: <input class="forminput" type="number"> 
     </td> 
    </tr> 
    <tr class="arow"> 
     <td class="t-currentbalance"> 
      40.00 
     </td> 
     <td class="otheramount"> 
      Other Amount: <input class="forminput" type="number"> 
     </td> 
    </tr> 
</table> 

はJQuery：

$(".forminput").each(function() { 
    $(this).on("click change paste", function() { 
    var otherAmount = $(this).val(); 
    var currentBalance = $(this).parent('td').prev('td.balance').html(); 
    if (otherAmount > currentBalance) { 
     alert('You are over the balance amount!'); 
    } 
    }); 
}); 

私は額の上に行く、私は未定義得続けます。私は両親にそれを変更し、私はランダムなデータの束を取得します。 ！.each()

第二の必要性を：すべてのヘルプはそんなにお願いします〜

Answer 1

第一、理解されるであろう、あなたはparseInt()

第三を使用する必要があります：あなたが追加する必要がinput keyupイベントも同様

デモを見る

$('.forminput').on("paste input keyup", function() { 
 
    var otherAmount = parseInt($(this).val()); 
 
    var currentBalance = parseInt($(this).parent('td').prev('td.balance').text()); 
 
    if (otherAmount > currentBalance) { 
 
    alert('You are over the balance amount!'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr class="arow"> 
 
     <td class="balance"> 
 
      20.00 
 
     </td> 
 
     <td class="otheramount"> 
 
      Other Amount: <input class="forminput" type="number"> 
 
     </td> 
 
    </tr> 
 
    <tr class="arow"> 
 
     <td class="balance"> 
 
      30.00 
 
     </td> 
 
     <td class="otheramount"> 
 
      Other Amount: <input class="forminput" type="number"> 
 
     </td> 
 
    </tr> 
 
    <tr class="arow"> 
 
     <td class="t-currentbalance"> 
 
      40.00 
 
     </td> 
 
     <td class="otheramount"> 
 
      Other Amount: <input class="forminput" type="number"> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 2

これは<td>であるという事実は、質問または回答に本当に無関係です。
あなた持って.balanceと.otheramount変更は、あなたが現在otheramountから最も近い.arow検索同じ.arow
内にある.balanceを取得したい.otheramount
含ま.arow：あなたができることから、$(this).closest('.arow')
をその中に.balanceを見つける：$(this).closest('.arow').find('.balance')
それは、現在の残高があり、この内のテキストです：
  var currentBalance = $(this).closest('.arow').find('.balance').text();

1つの問題は、あなたが値としてこれを扱いたいので、することができますparseFloat(currentBalance)

あなたはまた、それが入力されたとおりに変更イベントが発生したときだけでなく、値をチェックし、そうする keyupイベントを追加することもできます

リスナーが、その後changeを削除する必要があります。

に注意してください。最初に.text（）値を取得し、パターンマッチしてparseFloatがあなたにNaNを与えないようにすることができます。ここで

// Note this does not check for non-numeric input, so parseFloat could botch things. 
 
$(".forminput").on("click paste keyup", function() { 
 
    var otherAmount = parseFloat($(this).val()); 
 
    var currentBalance = parseFloat($(this).closest('.arow').find('.balance').text()); 
 
    if (otherAmount > currentBalance) { 
 
     alert('You are over the balance amount!'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<table> 
 
    <tr class="arow"> 
 
     <td class="balance"> 
 
      20.00 
 
     </td> 
 
     <td class="otheramount"> 
 
      Other Amount: <input class="forminput" type="number"> 
 
     </td> 
 
    </tr> 
 
    <tr class="arow"> 
 
     <td class="balance"> 
 
      30.00 
 
     </td> 
 
     <td class="otheramount"> 
 
      Other Amount: <input class="forminput" type="number"> 
 
     </td> 
 
    </tr> 
 
    <tr class="arow"> 
 
     <td class="balance"> 
 
      40.00 
 
     </td> 
 
     <td class="otheramount"> 
 
      Other Amount: <input class="forminput" type="number"> 
 
     </td> 
 
    </tr> 
 
</table>

私たちは、同じことは、それが表にない場合でも...これはdiv要素やスパンを使用して動作することを参照してください。私はあなたのコンテンツをレイアウトするためにテーブルを使用することが悪いフォームと考えられるので、これを言及します。
正確に同じコードは変更されていません。もこのマークアップで動作します。 HTMLタグが使用されているクラスではなく、クラスにのみ依存します。

// Note this does not check for non-numeric input, so parseFloat could botch things. 
 
$(".forminput").on("click paste keyup", function() { 
 
    var otherAmount = parseFloat($(this).val()); 
 
    var currentBalance = parseFloat($(this).closest('.arow').find('.balance').text()); 
 
    if (otherAmount > currentBalance) { 
 
     alert('You are over the balance amount!'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div> 
 
    <div class="arow"> 
 
     <span class="balance"> 
 
      20.00 
 
     </span> 
 
     <span class="otheramount"> 
 
      Other Amount: <input class="forminput" type="number"> 
 
     </span> 
 
    </div> 
 
    <div class="arow"> 
 
     <span class="balance"> 
 
      30.00 
 
     </span> 
 
     <span class="otheramount"> 
 
      Other Amount: <input class="forminput" type="number"> 
 
     </span> 
 
    </div> 
 
    <div class="arow"> 
 
     <span class="balance"> 
 
      40.00 
 
     </span> 
 
     <span class="otheramount"> 
 
      Other Amount: <input class="forminput" type="number"> 
 
     </span> 
 
    </div> 
 
</div>