- 浏览: 176865 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (202)
- AOP (1)
- Dom4j 使用简介 (1)
- eclipse (16)
- Git (1)
- hibernate (2)
- html (4)
- ha (1)
- JDBC (4)
- java (15)
- java泛型 (1)
- jsp (7)
- js&jquery (14)
- jdk (1)
- log4j (12)
- linux (23)
- maven (9)
- mysql (7)
- myeclipse (2)
- MongoDB (4)
- oracle应用 (3)
- php (6)
- struts2 (4)
- spring (10)
- svn (3)
- shell (7)
- servlet (8)
- socket (2)
- sqlite (1)
- TomCat (2)
- ThinkPHP (2)
- UltraEdit (1)
- vmware (2)
- WebService (2)
- web.xml (3)
- windows (1)
- xml (3)
- 软件应用 (2)
- 感悟 (1)
- 插件 (1)
- 非技术 (6)
- 编码 (1)
- 网络协议 (4)
- 杂谈 (2)
- 证书 (1)
- 加密 (3)
- 分布与集群 (1)
- PKI (1)
- thymeleaf (1)
- springboot (1)
- ajax (1)
最新评论
页面添加重置按钮,可用于添加页面,编辑页面(思路:先把加载后的页面中需要重置的值先存储在各自的map中,重置时覆盖回去)
写一个按钮触发
<script type="text/javascript"> var inputTextMap = {}; //<input type="text"> var inputFileMap = {};//<inoput type="file"> var textareaMap = {};//<textarea ...> var inputRadioMap = {};//<input type="radio"> var inputCheckboxMap = {};//<input type="checkbox"> var selectMap = {};//select下拉框 var imgMap = {};//<img id="" src="..."> $("#pageContent input[type='text']").each(function(){//pageContent 为从id为pageContent 的标签下查找 inputTextMap[$(this).attr("name")] = $(this).val(); }); $("#pageContent input[type='file']").each(function(){ inputFileMap[$(this).attr("name")] = $(this).val(); }); $("#pageContent textarea").each(function(){ textareaMap[$(this).attr("name")] = $(this).text(); }); $("#pageContent input[type='radio']:checked").each(function(){ inputRadioMap[$(this).attr("name")] = $(this).val(); }); $("#pageContent input[type='checkbox']").each(function(){ if($(this).attr("checked")=="checked"){ inputCheckboxMap[$(this).attr("name")+","+$(this).attr("value")] = "checked"; }else{ inputCheckboxMap[$(this).attr("name")+","+$(this).attr("value")] = "unchecked"; } }); $('#pageContent select').each(function(){ selectMap[$(this).attr("id")] = $(this).val(); }); $("#pageContent img").each(function(){ imgMap[$(this).attr("id")] = $(this).attr("src"); }); function inputTextReset(){ for(var name in inputTextMap){ if(inputTextMap.hasOwnProperty(name)){ $("input[name='"+ name +"']").val(inputTextMap[name]); } } } function inputFileReset(){ for(var name in inputFileMap){ if(inputFileMap.hasOwnProperty(name)){ $("input[name='"+ name +"']").val(inputFileMap[name]); } } } function textareaReset(){ for(var name in textareaMap){ if(textareaMap.hasOwnProperty(name)){ $("textarea[name='"+ name +"']").val(textareaMap[name]); } } } function inputRadioReset(){ $.each(inputRadioMap,function(key,value){ $("input:radio:[name='"+key+"']:[value='"+value+"']").attr("checked",true); }); } function inputCheckboxReset(){ $.each(inputCheckboxMap,function(key,value){ if('checked' == value){ $("input:checkbox:[name='"+key.split(",")[0]+"']:[value='"+key.split(",")[1]+"']").attr("checked", "checked"); }else{ $("input:checkbox:[name='"+key.split(",")[0]+"']:[value='"+key.split(",")[1]+"']").removeAttr("checked"); } }); } function selectReset(){ $.each(selectMap,function(key,value){ $("#"+key+" option[value = '"+value+"']").attr("selected","selected"); }); } function imgReset(){ $.each(imgMap,function(key,value){ $("#"+key).attr("src",value); }); } function allReset(){ inputTextReset(); inputFileReset(); textareaReset(); inputRadioReset(); inputCheckboxReset(); selectReset(); imgReset(); } </script>
写一个按钮触发
<button type="button" onclick="allReset()" >重置页面</button>
发表评论
-
html页面引入另一html片段,并重新加载js
2019-12-10 14:16 758页面需要有这一功能,通过点击不同的按钮,在同一<div ... -
jQuery校验上传文件格式和大小
2018-09-14 17:03 1266jQuery校验上传文件的格式和大小, <input i ... -
使用JS对中文字符串进行utf-8的Base64编码
2017-03-26 18:13 1124<!DOCTYPE html PUBLIC &quo ... -
js中使标记失效disabled,定时器
2016-12-23 09:59 705<div id="esealSubRigh ... -
计时器
2016-12-22 17:01 506jsp页面需要检测一个input框中的值,如果有变化则触发另一 ... -
数组转json,json转数组
2016-06-04 10:06 511thinkphp后台用到了将数组转成json数据传到前台htm ... -
PHP数组和Json之间的转换
2016-05-09 14:46 450引用http://www.cnblogs.com/xmphoe ... -
html的disabled使用
2016-05-07 21:37 1518disabled 属性规定应该禁用 input 元素。 被禁 ... -
jQuery页面加载初始化的3种方法
2016-05-07 17:55 1686一、jQuery 页面加载初始化的方法有3种 ,页面在加载的 ... -
Myeclipse 安装Aptana3.2 插件
2014-07-28 17:57 509原文地址:http://www.cnbl ... -
html显示本地xml文件内容
2014-07-17 11:18 1357实现浏览本地xml文件 ... -
JQuery:常用方法一览
2014-06-04 09:36 705Attribute:$(”p”).addClass(cs ... -
prototype.js详解
2014-06-01 13:14 512prototype.js是什么? 万 ...
相关推荐
### 图片作为提交按钮与重置按钮的编程技术 #### 一、背景介绍 在现代网页设计中,视觉效果对于吸引用户和提升用户体验至关重要。传统的文本提交按钮和重置按钮虽然简单实用,但在某些场景下可能显得较为单调。为此...
点击重置按钮,提示是否确认重置表单
本示例关注的是在搜索和重置按钮上实现这样的动画。Angular2提供了强大的动画支持,通过`@angular/animations`模块,我们可以创建丰富的动画效果。 首先,我们需要引入所需的动画指令。在`project.component.ts`中...
因此,如果在页面加载时没有加载form组件,或者没有进行实例化,那么select元素就可能不会被自动修饰,从而导致重置按钮无法正常工作。 为了确保select元素和其他表单元素能够正确地被修饰,需要在使用Layui时,...
**Arduino-像按钮一样使用重置按钮 - 项目开发** 在Arduino Uno的开发过程中,我们经常需要使用到各种输入设备,如按钮。然而,你是否想过将Arduino的重置按钮作为一个功能按钮来使用呢?这个项目就是关于如何利用...
在本教程中,我们将探讨如何在Bootstrap环境中实现查询按钮和重置按钮的功能,这在数据检索和展示列表时非常常见。 首先,我们要理解问题背景。通常在数据查询界面,用户需要输入查询条件,例如学号(`stuNo`)和...
此外,我们还添加了一个`<div>`元素,用于显示所选颜色并包含一个"×"图标,作为重置按钮: ```html <option value="">Select a color.. <option value="red">Red <option value="green">Green ...
标题和描述中提到的知识点是关于在JSP(Java Server Pages)中如何使用重置按钮来清空表单数据的实例。这里使用了jQuery这一流行的JavaScript库来实现表单的清空操作,具有一定的实用价值,适合对Web开发感兴趣的...
在ASP.NET中,我们经常需要处理用户输入,并且有时会遇到需求,需要提供一个“清空”或“重置”按钮,以便用户可以快速清除表单中的所有输入。本文将详细介绍如何在ASP.NET中实现这样一个功能。 首先,我们需要理解...
我们在做表单的时候往往会设置一个提交按钮和一个重置按钮,有时可能会为了页面的好看而使用一些小图片来代替这些按钮,对于提交按钮使用图片的方法非常简单,相信大家都会。那么如何使用图片按钮作为重置(reset)...
3. **重置按钮**:重置按钮用于将计时器归零。这涉及到清除计时器(如停止按钮所做的那样),然后将显示的时间设置为初始值,通常是0。 实现JavaScript StopWatch时,可能的代码结构如下: ```javascript let ...
这是该扩展程序的目的:隐身模式重置按钮删除了在一段时间内正在运行的隐身会话中积累的所有数据-历史记录,缓存,Cookie ... ...,而不必关闭所有隐身选项卡。当前无法执行此操作-您要么必须关闭所有隐身选项卡并...
在VC++编程环境中,我们经常会遇到需要自定义控件外观的需求,比如修改默认的按钮样式。这个主题就是关于如何在VC++中实现按钮的自定义重绘,使其根据BMP位图显示不同的状态。以下是对这个知识点的详细阐述: 1. **...
计数器定时器Swift APP 显示计数和秒间隔,带有开始、暂停和重置按钮打开Xcode并创建一个新项目“CouterTimer” 新建项目 --> 单页应用程序语言 : 快速创建项目后自动生成的文件AppDelegate.swift ViewController...
点击重置按钮则将`count`设回0。 在实际应用中,我们可能需要考虑一些额外的细节,比如限制计数范围、处理非整数计数或者添加动画效果。例如,我们可以使用`Math.min`和`Math.max`函数来限制计数器的最小值和最大值...
此外,按下正面的重置按钮至少一秒钟会发出蜂鸣声并软重启APU。 有关请参见。安装 # sudo apt-get install linux-headers-$(uname -r) build-essential# git clone https://github.com/trick77/apu-led-button# cd
- `oReset.onclick`: 重置按钮被点击时,将所有计数器重置为0,并恢复`<div>`内容为初始状态,同时启用开始按钮,禁用其他按钮。 4. **时间更新函数`setTimeStr`**: - 这个函数负责根据毫秒计数器`ms`的值更新...
2. 手动按钮复位电路:这种电路中,用户可以通过按下按钮触发复位。按钮与一个上拉电阻并联,按下按钮时,复位引脚被拉低,单片机复位。松开按钮后,上拉电阻使复位引脚恢复高电平,系统恢复正常运行。 3. 自动看门...