Question

在我的应用程序中有一个表，并且显示了一个tr：none。我想用jquery显示。

$(document).on('click','.btn',function(){
  var name = $('#name').val();
  var email = $('#email').val();
  var phno = $('#phno').val();
  var mes= $('#message');
  if (phno.length == 10) {

  }else{
    mes.style.display = "block";
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<tbody>
  <tr>
    <td><label>NAME</label></td>
    <td><input type="text" class="form-control" id="name" style="text-transform:uppercase" name="txtname"></td>
  </tr>
  <tr>
    <td><label>EMAIL</label></td>
    <td><input type="email" class="form-control" id="email" name="txtemail"></td>
  </tr>
  <tr>
    <td><label>PHONE NO.</label></td>
    <td><input type="text" class="form-control" id="phno" maxlength="10" name="txtphno"></td>
  </tr>
  <tr id="message" style="display: none; color: red;">
    <td>Invalid Phone Number</td>
  </tr>
  <tr>
    <td colspan="2">
      <button class="btn btn-success btn-lg btn-block" type="submit">REFER</button>
    </td>
  </tr>
</tbody>
</form>

这是我的桌子。我想显示消息行5秒钟。我无法这样做。

这是我的jquery。但这是行不通的。请帮助我。

Answer 1

您应该使用$("#name")而不是("#name")来获取元素，并且querySelectorAll将检索与输入匹配的元素列表。而不是使用$("#message")来获取元素。

使用以下代码：

$(document).on('click','.btn',function(){
    var name = $('#name').val();
    var email = $('#email').val();
    var phno = $('#phno').val();
    var mes= $('#message');
    if (phno.length == 10) {

    }else{
        $('#message').show();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
    <tr>
        <td><label>NAME</label></td>
        <td><input type="text" class="form-control" id="name" style="text-transform:uppercase" name="txtname"></td>
    </tr>
    <tr>
        <td><label>EMAIL</label></td>
        <td><input type="email" class="form-control" id="email" name="txtemail"></td>
    </tr>
    <tr>
        <td><label>PHONE NO.</label></td>
        <td><input type="text" class="form-control" id="phno" maxlength="10" name="txtphno"></td>
    </tr>
    <tr id="message" style="display: none; color: red;">
        <td>Invalid Phone Number</td>
    </tr>
    <tr>
        <td colspan="2">
            <button class="btn btn-success btn-lg btn-block" type="submit">REFER</button>
        </td>
    </tr>
</tbody>
</table>
<input class="btn" value="click me" type="button"/>

无法显示表格隐藏行

1 个答案: