通过DOM节点操作来获取表单信息
这是之前突发奇想地用dom节点的关系来操作表单的故事。。
事情的经过是这样的,大概就是一个平台注册后有留言功能,管理员登录之后可以对这些留言进行回复。这个页面呢,就是通过foreach获取到数据库里的信息,把用户的ID以及留言信息最后呈现在界面上的样子大概如下图(我的画图天赋真是杠杠滴)
没错就是这么酷炫的。
左侧是用户的ID 中间是用户留言内容 每个后面都有一个回复按钮 管理员点击回复之后 相应的留言框下部就会出现一个文本框,然后就可以愉快的回复了。对了还有一个回复发送以及删除功能。大概就是如下图片,你们体会一下。。
然后开始的代码如下
<div style="border:1px solid">
<ul>
<c:forEach items="$(meslist)" var="mesList">
<li>
<h3>
$(mesList.name)<li>$(mesList.email)</li><span clss="timer">$(mesList.item)</span>
</h3>
<p>管理员您好:<br/> $(meslist.contene)</p>
<div><button onclick="reply(this)">回复</button></div> <!-- 这里点击后要出现文本框 -->
<form id="replyCon" name="replyCon" style="display:none">
<textarea cols="86"></textarea>
<input type="submit" class="sendBtn" value="发送" onclick="sendMsgs(this)">
<input type="reset" class="cancelBtn" value="取消" onclick="cancelMsg(this)">
</form>
</li>
</c:forEach>
</ul>
</div>
大概就是点击回复之后,会出现一个文本框,编辑好内容,可以提交了。于是我就给reply()函数传递了参数this,本想着定义函数时给其传入一个形参,在函数内部操作不就可以了吗,可是人生不如意十之八九。添加了之后每次不管去点击第几个用户的回复按钮,都会在第一个用户下部的区域出现文本框,试了半天后并没有什么卵用,于是我就想到了一个很神奇的方法,不如让形参沿着作用域链往上找到父节点然后顺级又下来,找到当前的<div>使其显示为block,这不就成了吗。果然被机智的我解决了,代码如下
function replay(o){
var o.parentNode.parentNode.getElementsByTagName('form')[0].style.display="block";
}
果然每次点击之后都会在其相应的区域出现文本框,大功告成。。
然而点击send按钮之后还要获取<h3>标签里的用户名信息以及<textarea>里的回复留言信息,于是又用了同样的方法,代码如下
function sendMsgs(o){
var rName=o.parentNode.parentNode.getElementsByTagName('h3')[0].getElementsByTagName('li')[0].innerHtml;
var content=o.parentNode.getElementsByTagName('textarea')[0].value;
}
然后愉快的解决了问题。
完。。。
通过DOM节点操作来获取表单信息的更多相关文章
- django-表单之获取表单信息(二)
urls.py from django.urls import path from . import views urlpatterns = [ path('',views.index,name=&q ...
- Servlet——提交表单信息,Servlet之间的跳转
HTML表单标签:<form></form> 属性: actoion: 提交到的地址,默认为当前页面 method: 表单提交方式 有get和post两种方式,默认为get ...
- laravel 验证表单信息
1控制器验证 $this->validate($request,[ 'Student.name'=>'required|min:2|max:20', 'Student.age'=>' ...
- java:JavaScript2:(setTimeout定时器,history.go()前进/后退,navigator.userAgent判断浏览器,location.href,五种方法获取标签属性,setAttribute,innerHTML,三种方法获取form表单信息,JS表单验证,DOM对象,form表单操作)
1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> ...
- js 节点 document html css 表单节点操作
js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...
- (转载)html dom节点操作(获取/修改/添加或删除)
DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- Dom节点操作总结
Dom 一:Dom的概念 Dom的简介: 全称为 document object model 文档对象模型,是操作文档的一整套方法 - 文档 - html,document时一个对象,是dom ...
- 04-老马jQuery教程-DOM节点操作及位置和大小
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...
随机推荐
- iOS开发Swift篇—(一)简单介绍
iOS开发Swift篇—简单介绍 一.简介 Swift是苹果于2014年WWDC(苹果开发者大会)发布的全新编程语言 Swift在天朝译为“雨燕”,是它的LOGO 是一只燕子,跟Objective-C ...
- bzoj 2875: [Noi2012]随机数生成器
#include<cstdio> #include<iostream> #include<cstring> #define ll long long using n ...
- IT行业的斗争
有朋友和我说,她希望做一名IT工作者,原因是可以对着机器工作,不需要再面对人与人之间的是是非非. 我真心不想打破她的憧憬,因为无论干任何行业,有人,就有矛盾,就有斗争. 我是那名失败者,仅仅想安安稳稳 ...
- 网页首页制作总结(div+css+javascript)
一.对网页整体布局,分几个版块 如下图所示: 确定布局之后,规划好网页,准备素材,按照标准文档流的顺序,从上到下,从左到右写入代码. 以上图为例,分为两部分,红色的主体部分和页脚.主体部分分割为头部. ...
- WeX5 快速开发平台 V3.6 正式版发布
WeX5 V3.6 正式版核心特性:一.打包特性增强: 1- 提供多WebView选择,引入腾讯X5引擎,可自动适配移动设备环境进行切换,使通过X5打包生成的App具备更高的兼容性及更小的文件尺寸: ...
- Oracle GoldenGate for Big Data 12.2.0.1的新特性
ogg for bigdata 12.2已经发布,新增有如下特性:支持java replicat进程OGG12.2中开发了基于java的replicat模式,以前的版本是基于extract进程中使用u ...
- (zz) 谷歌技术"三宝"之BigTable
006年的OSDI有两篇google的论文,分别是BigTable和Chubby.Chubby是一个分布式锁服务,基于Paxos算法:BigTable是一个用于管理结构化数据的分布式存储系统,构建在G ...
- ViewHolder简洁写法
ViewHolder holder = null; if(convertView == null){ convertView = mInflater.i ...
- Padding Oracle Attack的一些细节与实现
Padding Oracle Attack还是颇具威力的,ASP.NET的Padding Oracle Attack被Pwnie评为2010年最佳服务端漏洞之一.还是看 Juliano Rizzo a ...
- (转)PhoneGap开发环境搭建
(原)http://www.cnblogs.com/Random/archive/2011/12/28/2305398.html PhoneGap开发环境搭建 项目中要用PhoneGap开发,了解 ...