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 相关文章推荐
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
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制作静态网站的模板框架(三)
2006/10/09 PHP
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
php echo 输出字符串函数详解
2010/05/13 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
python中偏函数partial用法实例分析
2015/07/08 Python
对于Python中RawString的理解介绍
2016/07/07 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
pytorch中index_select()的用法详解
2021/01/06 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
介绍一下linux的文件权限
2014/07/20 面试题
自荐信的两点禁忌
2013/10/30 职场文书
行政文员岗位职责
2013/11/08 职场文书
自主招生自荐信
2013/12/08 职场文书
经典商业广告词
2014/03/13 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
复活读书笔记
2015/06/29 职场文书