Question

我正在创建一个广泛使用<input type="number">字段的表格，如果没有放入数字，我想让表格的背景颜色变为红色。

这是我的表的示例html：

<tr>
  <td>
      <input type="number" class="amount" name="amount">
  </td>
</tr>

这是我用来验证输入的jquery代码：

$(".amount").blur(function() {
   if ($(this).val() ==="") {
      $(this).parents("td").css("background-color", "#CDC9C9");
    }
});

如果第一次输入的值不正确，则此方法可以正常工作，但如果更改输入直到正确，则背景颜色不会更改。

我认为每次更改某些内容时，jquery都会评估模糊方法但事实并非如此。为什么呢？

另外，我的桌子上有交替的背景颜色，所以我宁愿不要因设置背景颜色而进入太复杂的事情，因为这可能会适得其反。

Answer 1

change事件会在输入发生变化且模糊时随时触发。每次击键都会触发input事件。您可以使用其中一个来添加和删除一个提供正确背景颜色的类，如下所示：

$(".amount").on("change", function() {
    if ($(this).val() === "") {
        $(this).closest("td").addClass("red-class");
    } else {
        $(this).closest("td").removeClass("red-class");
    }
});

添加一些CSS：

<style>
    .red-class {
        background-color: red;
    }
</style>

Answer 2

在输入字段中尝试关键事件，例如 keyup 或 keypress 或 keydown 。在此活动中调用您的模糊功能。示例：

$(".amount").keyup(function() {
if ($(this).val() ==="") {
    $(this).parents("td").css("background-color", "#CDC9C9");
}
else{
     $(this).parents("td").css("background-color", "greenClass");
}
});

使用jquery和css验证表数据

2 个答案: