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中实现动画效果的基本操作介绍
Apr 16 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
vue动态绑定style样式
Apr 20 Vue.js
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删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
newxtree.js代码
2007/03/13 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
python实现抽奖小程序
2020/04/15 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
幼儿园小班植树节活动方案
2014/03/04 职场文书
经济贸易系求职信
2014/08/04 职场文书
新员工试用期自我评价
2015/03/10 职场文书
药店收银员岗位职责
2015/04/07 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
python pygame入门教程
2021/06/01 Python