脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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按钮功能之查询按钮和重置按钮，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • javascript中对象的定义、使用以及对象和原型链操作小结

    javascript中对象的定义、使用以及对象和原型链操作小结

    这篇文章主要介绍了javascript中对象的定义、使用以及对象和原型链操作,结合实例形式总结分析了javascript对象操作的常用技巧,需要的朋友可以参考下
    2016-12-12
  • JavaScript 实现普通数组数据转化为树形数据结构的步骤说明

    JavaScript 实现普通数组数据转化为树形数据结构的步骤说明

    在 JavaScript 中,将普通数组数据转化为树形结构的数据是一个常见的任务,特别是在处理层级数据（例如分类、组织结构等）时,本文展示如何将一个扁平的数组转化为树形数据结构,感兴趣的朋友一起看看吧
    2024-12-12
  • 深入理解JavaScript函数参数(推荐)

    深入理解JavaScript函数参数(推荐)

    这篇文章主要介绍了深入理解JavaScript函数参数(推荐)的相关资料,需要的朋友可以参考下
    2016-07-07
  • JS如何调用WebAssembly编译出来的.wasm文件

    JS如何调用WebAssembly编译出来的.wasm文件

    这篇文章主要介绍了关于WebAssembly编译出来的.wasm文件js如何调用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-11-11
  • layui-table对返回的数据进行转变显示的实例

    layui-table对返回的数据进行转变显示的实例

    今天小编就为大家分享一篇layui-table对返回的数据进行转变显示的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript 树控件 比较好用

    javascript 树控件 比较好用

    构建树控件的比较理想的一种方法是用ul、li这种简单的标签组合来实现，但是你如果想实现复杂一点的比如要节点可编辑、可拖动、可更换风格等等我想ExtJS是最好的选择了。
    2009-06-06
  • JavaScript 动态生成方法的例子

    JavaScript 动态生成方法的例子

    动态生成方法的例子，这些方法在新对象实例化的时候创建
    2009-07-07
  • 微信小程序实现多层级复选框菜单

    微信小程序实现多层级复选框菜单

    这篇文章主要为大家详细介绍了微信小程序实现多层级复选框菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • js 解析 JSON 数据简单示例

    js 解析 JSON 数据简单示例

    这篇文章主要介绍了js 解析 JSON 数据的方法,结合简单实例形式分析了js 解析 JSON 格式数据的相关操作技巧与注意事项,需要的朋友可以参考下
    2020-04-04
  • 微信小程序用户授权获取手机号（getPhoneNumber）

    微信小程序用户授权获取手机号（getPhoneNumber）

    这篇文章主要给大家介绍了关于微信小程序用户授权获取手机号的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03

最新评论