脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 查询 按钮 重置按钮

Bootstrap按钮功能之查询按钮和重置按钮

 更新时间：2016年10月26日 11:10:49   作者：翱翔天地  
一般情况下，查询列表有查询条件、查询按钮和重置按钮，输入查询条件，点击查询按钮查询列表等数据；点击重置按钮会将查询条件恢复到原始状态。接下来通过本文给大家介绍bootstrap实现查询按钮和重置按钮的方法，一起看看吧

Bootstrap按钮功能之查询按钮和重置按钮

1、问题背景

一般情况下，查询列表有查询条件、查询按钮和重置按钮，输入查询条件，点击查询按钮查询列表等数据；点击重置按钮会将查询条件恢复到原始状态

2、实现源码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Bootstrap-查询按钮和重置按钮</title> 
<link rel="stylesheet" href="../js/bootstrap-3.3.5/dist/css/bootstrap.css" /> 
<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script> 
<script type="text/javascript" src="../js/bootstrap-3.3.5/dist/js/bootstrap.js" ></script> 
<script> 
$(document).ready(function(){ 
//查询按钮事件 
$("#searchBtn").off().on("click",function(){ 
var stuNo = $("#stuNo").val(); 
var stuName = $("#stuName").val(); 
alert("学生学号："+stuNo+"\n学生姓名："+stuName); 
console.info(stuNo+"\n"+stuName); 
}); 
//重置按钮事件 
$("#resetBtn").off().on("click",function(){ 
$("#stuNo").val(""); 
$("#stuName").val(""); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="row" style="padding-top: 10px;"> 
<div class="col-xs-12"> 
<div class="col-xs-2"> 
<input type="text" class="form-control" id="stuNo" placeholder="请输入学号"/> 
</div> 
<div class="col-xs-2"> 
<input type="text" class="form-control" id="stuName" placeholder="请输入姓名"/> 
</div> 
<div class="col-xs-2"> 
<button class="btn btn-primary btn-sm" id="searchBtn">查询</button> 
<button class="btn btn-sm" id="resetBtn">重置</button> 
</div> 
</div> 
</div> 
</body> 
</html>

3、实现结果

（1）初始化

（2）输入查询条件点击“查询”

（3）点击“重置”

以上所述是小编给大家介绍的Bootstrap按钮功能之查询按钮和重置按钮，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 前端常用的js函数方法

    前端常用的js函数方法

    这篇文章主要给大家分享的是常用的js函数的方法，告别搜索引擎的帮助，提高你的开发效率，,需要的朋友可以参考一下，希望对你的学习有所帮助
    2021-12-12
  • JavaScript Ajax实现异步通信

    JavaScript Ajax实现异步通信

    这篇文章主要为大家详细介绍了JavaScript Ajax实现异步通信的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 详解微信小程序实现仿微信聊天界面(各种细节处理)

    详解微信小程序实现仿微信聊天界面(各种细节处理)

    这篇文章主要介绍了详解微信小程序实现仿微信聊天界面(各种细节处理)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • JavaScript中关于base64的一些事

    JavaScript中关于base64的一些事

    base64 其实是一种编码转换方式, 将 ASCII 字符转换成普通文本, 是网络上最常见的用于传输8Bit字节代码的编码方式之一。这篇文章重点给大家介绍JavaScript中关于base64的一些事，感兴趣的朋友跟随小编一起看看吧
    2019-05-05
  • js实现的切换面板实例代码

    js实现的切换面板实例代码

    切换面板具备功能：鼠标划过不同的题目会有不同的图片和解说，可以连接到不同的网站，实例代码如下，感兴趣的朋友可以参考下哈
    2013-06-06
  • javascript编写贪吃蛇游戏

    javascript编写贪吃蛇游戏

    这篇文章主要介绍了javascript编写贪吃蛇游戏的代码，非常简单，也很好玩，有需要的童鞋们可以参考下。
    2015-07-07
  • layui 数据表格复选框实现单选功能的例子

    layui 数据表格复选框实现单选功能的例子

    今天小编就为大家分享一篇layui 数据表格复选框实现单选功能的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 关于json字符串与实体之间的严格验证代码

    关于json字符串与实体之间的严格验证代码

    在一个项目中要求严格验证传入的json字符串与定义的 类匹配，否则不记录。后来查了好多资料才弄明白，下面小编给大家分享下关于json字符串与实体之间的严格验证，感兴趣的朋友一起看看吧
    2016-11-11
  • js调试系列 控制台命令行API使用方法

    js调试系列 控制台命令行API使用方法

    上次初步介绍了什么是控制台，以及简单的 console.log 输出信息。最后还有两个小问题，我们就当回顾，来看下怎么操作吧
    2014-06-06
  • js如何修改对象数组的key值

    js如何修改对象数组的key值

    这篇文章主要介绍了js如何修改对象数组的key值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02

最新评论