Question: I'm creating a table that'll make extensive use of `<input type="number">` fields and I want to make the background color of the table turn red if a number isn't placed inside. 

Here's example html for my table:

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

```

Here's the jquery code I'm using to validate the input:

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

```

This works fine if an incorrect value is entered the first time, but if you change the input until it's correct the background-color doesn't change. 

I'd think jquery would evaluate the blur method each time something is changed but that's not the case. Why?

Also, my tablerows have alternating background colors, so I'd prefer not to get into something too complicated with setting the background color as that might backfire.

Code snippet here:

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

```html
<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: 
The `change` event fires anytime an input has changed and is blurred. The `input` event fires with every keystroke. You can use either to add and remove a class that gives the correct background color like this:

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

```

And add some CSS:

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

```
Try key events such as **keyup** or **keypress** or **keydown** on input fields. Call that blur function of yours inside this event.
Example : 

```js
$(".amount").keyup(function() {
  if ($(this).val() == "") {
    $(this).parents("td").addClass("redClass");
  } else {
    $(this).parents("td").addClass("greenClass");
  }
});
```

```css
.redClass {
  background-color: red;
}

.greenClass {
  background-color: green;
}
```

```html
<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>
```