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


Posted in Javascript onOctober 26, 2016

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)初始化

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

(2)输入查询条件点击“查询”

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

(3)点击“重置”

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

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

Javascript 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
jQuery.each()用法分享
Jul 31 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
Javascript的this详解
Mar 23 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
AngularJS中如何使用echart插件示例详解
Oct 26 #Javascript
BootStrap modal模态弹窗使用小结
Oct 26 #Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 #Javascript
BootStrap tooltip提示框使用小结
Oct 26 #Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 #Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 #Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 #Javascript
You might like
PHP Cookie的使用教程详解
2013/06/03 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
js实现简单随机抽奖的方法
2015/01/27 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
理解JS事件循环
2016/01/07 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
跟老齐学Python之集合(set)
2014/09/24 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
python应用文件读取与登录注册功能
2019/09/23 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
AUC计算方法与Python实现代码
2020/02/28 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
房地产员工找工作的自我评价
2013/11/15 职场文书
实习生的自我评价
2014/01/08 职场文书
党员承诺书内容
2014/03/26 职场文书
党性心得体会
2014/09/03 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
采购员工作总结范文
2015/08/12 职场文书