当字段值小于数字时显示表格行[关闭]答案

【问题标题】：Show a table row when a field value is less than a number [closed]当字段值小于数字时显示表格行[关闭]
【发布时间】：2016-06-20 20:02:18
【问题描述】：

当年龄值小于 15 时，我想显示下面的隐藏表格行。

<td>Age</td>
      <td><input type="text" name="age" id="age"></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr style="display:none">
      <td> Guardian</td>
      <td><input type="hidden" name="guardian" id="guardian"></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>

【问题讨论】：

您能分享一下您目前取得的成就吗？
欢迎来到 SO。请访问help center 并使用tour 了解询问内容和方法。提示：显示代码和努力

标签： javascript jquery html css

【解决方案1】：

在 jQuery 中类似于

$("#age").on("input",function() { // or "keyup" or "blur"
  $(this).closest("tr").next().toggle(this.value<15);
});

不过，您不必隐藏 guaridan 的输入

【讨论】：

我想模糊在这种情况下会更适合。
@Rajesh：不会。模糊只会在输入失去焦点时触发..
@MilindAnantwar 考虑一下您的年龄是 31 岁的情况。现在，当您输入 3 时，处理程序将检查是否为 value<15 并显示该行。现在输入 1（值 = 31）。现在因为value<15 是假的，它会再次隐藏。在我的理解中，用户只有在完成后才会离开，我们应该只在那个时候处理我们的逻辑

【解决方案2】：

Working Fiddle

我稍微修改了你的html：

<table>

  <tr>
    <td>Age</td>
    <td>
      <input type="text" name="age" id="age">
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id='trGuardian' style="display:none">
    <td> Guardian</td>
    <td>
      <input name="guardian" id="guardian">
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

</table>

和 JQuery ：

$("#age").blur(function() {
  if (parseInt($(this).val()) < 15)
    $('#trGuardian').show();
  else
    $('#trGuardian').hide();
});

【讨论】：