使用jquery和css验证表数据

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都会评估blur方法，但事实并非如此。为什么？

此外，我的桌椅具有交替的背景色，所以我不希望设置背景色时过于复杂，因为这可能适得其反。

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>

完整代码段：

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

.red-class {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="number" class="amount" name="amount">
    </td>
  </tr>
</table>

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