确保 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!');
    }
  });
});

当我超过金额时，我一直不确定。我把它改成了父母，我得到了一堆随机数据。任何帮助将不胜感激，非常感谢！~

Answer 1

第一个：不需要.each()

2nd：你需要使用parseInt()

第 3 次：您还需要添加 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>这一事实与问题或答案无关。
您有一个 .arow，其中包含一个 .balance 和一个 .otheramount
当.otheramount 更改时，您希望获得位于同一.arow 内的.balance
从当前的其他数量中找到最接近的.arow：$(this).closest('.arow')
您可以从中找到.balance：$(this).closest('.arow').find('.balance')
具有当前余额的是其中的文本：
var currentBalance = $(this).closest('.arow').find('.balance').text();

一个问题是你想把它当作一个值，所以你可以parseFloat(currentBalance)

您可能还想在输入时检查值，而不仅仅是在更改事件发生时，因此将keyup 事件添加到侦听器，然后您应该删除change。

小心parseFloat，您可能需要先获取 .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 和 span。我提到这一点是因为使用表格来布置您的内容被认为是错误的形式。
您在这里看到完全相同的代码，no changes，也适用于这个标记。它仅取决于类，而不取决于正在使用的 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>