Bootstrap-查询按钮和重置按钮

最新推荐文章于 2022-03-09 14:26:19 发布
最新推荐文章于 2022-03-09 14:26:19 发布
阅读量2.2k 收藏 5
点赞数
文章标签： javascript ViewUI

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）点击“重置”


iteye_8264
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap按钮功能之查询按钮和重置按钮
11-30
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/javascrip
html 文本框 重置,Bootstrap和jQuery实用重置输入框内容的按钮插件
weixin_30510787的博客
06-01 533
pureClearButton是一款基于Bootstrap的非常实用的用于清空和重置input输入框内容的jQuery按钮插件。当好在输入框中输入一些内容之后，如果想清除这些内容，可以直接点击输入框右侧的小圆叉按钮即可。该jQuery按钮插件支持的输入框类型有：textpasswordemailurlsearchtelnumberdatetime使用方法使用该重置input输入框内容插件要引入jQ...
前端框架与前端类库的理解
weixin_30627381的博客
10-22 244
　　前端框架的理解误区 　　网站的价值在于它能为用户提供什么价值，在于网站能做什么，而不在于它是怎么做的，所以在网站还很小的时候就去追求网站的架构框架是舍本逐末，得不偿失的。前端框架同理，如果是一个简单的页面型产品，应用只是依赖服务器来生成Web页面和视图，并且只需要使用一些简单的Javascript或者JQuery来使应用更加具有互动性，那么一个JQuery前端类库就可以了，真的没必要用上一些...
Bootstrap的js插件之按钮(button)
weixin_33874713的博客
06-16 208
1）属性： data-loading-text="载入中..."——使button呈现载入状态； data-toggle="button"——使按钮可以切换状态； data-toggle="buttons"——使按钮组具有类似选择框的选择/取消功能。 autocomplete="off"——解决FireFox的兼容性问题：即FireFox会在多个页面载入之间保持button的禁用状...
bootstrap-datetimepicker添加清除按钮
10-22
在某些情况下，为了提高用户体验，我们需要添加一个清除按钮，让用户能够快速重置日期和时间选择。 首先，我们要理解如何在bootstrap-datetimepicker中添加清除按钮。这通常涉及到修改插件的配置选项。在初始化...
bootstrap-datepicker实现年、月、日控件重置
08-23
// 添加重置按钮的点击事件 $('#resetButton').click(function() { // 重置日期选择器，清除选定日期 datePicker.datepicker('clearDates'); }); }); ``` 在这个示例中，我们首先通过`$('#datePicker')....
基于Bootstrap重置输入框内容按钮插件
10-22
pureClearButton是一款基于Bootstrap的非常实用的用于清空和重置input输入框内容的jQuery按钮插件，感兴趣的小伙伴们可以参考一下
bootstrap-multiselect重置-reset
aklin47的博客
11-30 903
bootstrap-multiselect使用过程中发现重置按钮没有提供可编辑的点击方法，自行添加了一个 /** * Triggered on reset. */ onReset : function() { }, 使用类比onChange()，调用： <script type="text/javascript"> $(function(){
bootstrap功能总结
程序媛成长日记
05-06 2217
昨天做完标签页之后，认真地思考了一下。昨天迅速完成任务得益于之前看过bootstrap，知道他能够实现标签页。     所以今天在这里把我目前知道的bootstrap的功能总结一下，以便今后的使用。     一、使用前     1.引用css和js Bootstrap的HTML标准模板
bootstrap常用操作
duansamve的博客
04-29 230
一、关闭modal： // 关闭模态 $("#add-soft-distribute-modal").on("hide.bs.modal", function(){ $("#add-soft-distribute-modal-form")[0].reset(); $("#add-soft-distribute-modal-tab a:first").tab("show"); ...
关于查询功能中的重置
tairu的博客
03-09 1850
在查询功能中重置按钮一般是清空所有的查询内容，显示所有的记录，但当记录要根据登录账号所属地进行筛选显示时，就 需要特别注意一下了。 背景要求： 某些记录，要求只显示登录账号所属地的记录信息，非登录账号所属地的记录信息过滤不进行显示。 测试点： 1.点击【重置】按钮后，系统显示的记录信息是否已根据所属地进行筛选显示。 最直白的观察方法就是，不输入任何查询条件，看一下点击【重置】按钮前和后记录总量是否有变化，如果有变化大概就是有问题的了。 ...
Bootstrap 重置样式
歪脖先生的博客
03-04 5476
重置样式Bootstrap预定义了一些样式，Bootstrap 1使用的是以前的重置样式表。从 Bootstrap 2 开始，老的重置方式被 Normalize.css 取代，这是由 Nicolas Gallagher 和Jonathan Neal 共同维护的一个项目，这一项目还被 HTML5 Boilerplate 所采用。虽然我们在 reset.less 文件中使用了许多Normalize的代...
实现Bootstrap中select的重置功能
l_z_w99的博客
08-21 1万+
今天被一个重置bootstrap的select的需求所困扰许久，最后通过网上一位大神指点迷津，成功解决。这里把他分享给大家 》》============================================================================》 若简单地采用Reset按钮重置可能就达不到所想要的结果，因为bootstrap为了美化select，在原生态
BootstrapValidator超详细教程
热门推荐
陨落的轨迹的博客
12-07 17万+
废话不多说，直接开始~一、引入必要文件下载地址：(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)
bootstrapValidator如何重新初始化
jbgtwang的专栏
03-28 1万+
在大多数情况下bootstrapValidator是不需要重新初始化的，极少数情况下则需要把动态增加的控件也纳入到验证中来。这时如何做？ //先销毁 $("#yourForm").data('bootstrapValidator').destroy(); $('#yourForm').data('bootstrapValidator', null); //再重新初始化 $("#y
bootstrap登录、注册、重置密码demo
乔路非
08-23 1万+
用bootstrap写了一个登录页面，其中注册和重置密码采用了模态框，效果如下： 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <!-- 引入 jquery、Bootstrap --> ...
真正重置按钮的写法
Tomas
11-03 8647
找了一下午的成果！！！！！！！！ $(':input','#myform') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected');
BootstrapTable重新初始化
tongxin_tongmeng的博客
11-01 1万+
已经初始化的bootstrap table必须先销毁才可以再次初始化 function initQuoteReportTable(row){ $('#quoteReport_table').bootstrapTable('destroy'); //先销毁才可再次初始化 var projectName = row.PROJECT_NAME; var compositeName = ......
bootstrap按钮点击事件
最新发布
09-13
Bootstrap按钮点击事件可以通过jQuery来实现。在给按钮添加点击事件的同时，可以通过相关的方法来改变按钮的状态或样式。 首先，在HTML中引入jQuery和Bootstrap的相关脚本文件： ``` <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> ``` 然后，在合适的位置添加按钮元素： ```html <button type="button" class="btn btn-default js-btn">点击</button> ``` 接下来，使用jQuery选择器选中按钮元素，并为其添加点击事件： ```javascript $(".js-btn").on("click", function() { // 这里可以编写触发按钮点击事件后的逻辑代码 }); ``` 在点击事件的逻辑代码中，你可以使用各种方法来改变按钮的状态或样式，以达到你想要的效果。根据你的需求，以下是几个可能的示例： 1. 使用`button("loading")`方法来显示加载状态文本，可以通过`data-loading-text`属性来设置加载状态文本内容： ```javascript $(".js-btn").on("click", function() { $(this).button("loading"); // 显示加载状态 }); ``` 2. 使用`button("reset")`方法来重置按钮状态，将按钮文本还原为原始内容： ```javascript $(".js-btn").on("click", function() { $(this).button("reset"); // 重置按钮状态 }); ``` 3. 使用`button("complete")`方法来改变按钮状态为完成状态，可以通过`data-complete-text`属性来设置完成状态文本内容： ```javascript $(".js-btn").on("click", function() { $(this).button("complete"); // 改变按钮状态为完成状态 }); ``` 以上是几个常见的按钮点击事件的示例，你可以根据具体的需求选择适合的方法。重要的是要记得在HTML中引入jQuery和Bootstrap的脚本文件，并使用jQuery选择器选中按钮元素并添加点击事件，然后在点击事件的逻辑代码中使用相应的方法来改变按钮状态或样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值