这是之前突发奇想地用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节点操作来获取表单信息的更多相关文章

  1. django-表单之获取表单信息(二)

    urls.py from django.urls import path from . import views urlpatterns = [ path('',views.index,name=&q ...

  2. Servlet——提交表单信息,Servlet之间的跳转

    HTML表单标签:<form></form> 属性: actoion:  提交到的地址,默认为当前页面 method:  表单提交方式 有get和post两种方式,默认为get ...

  3. laravel 验证表单信息

    1控制器验证 $this->validate($request,[ 'Student.name'=>'required|min:2|max:20', 'Student.age'=>' ...

  4. java:JavaScript2:(setTimeout定时器,history.go()前进/后退,navigator.userAgent判断浏览器,location.href,五种方法获取标签属性,setAttribute,innerHTML,三种方法获取form表单信息,JS表单验证,DOM对象,form表单操作)

    1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> ...

  5. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  6. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  7. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  8. Dom节点操作总结

    Dom   一:Dom的概念 Dom的简介:  全称为 document object model  文档对象模型,是操作文档的一整套方法 - 文档 - html,document时一个对象,是dom ...

  9. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

随机推荐

  1. iOS开发Swift篇—(一)简单介绍

    iOS开发Swift篇—简单介绍 一.简介 Swift是苹果于2014年WWDC(苹果开发者大会)发布的全新编程语言 Swift在天朝译为“雨燕”,是它的LOGO 是一只燕子,跟Objective-C ...

  2. bzoj 2875: [Noi2012]随机数生成器

    #include<cstdio> #include<iostream> #include<cstring> #define ll long long using n ...

  3. IT行业的斗争

    有朋友和我说,她希望做一名IT工作者,原因是可以对着机器工作,不需要再面对人与人之间的是是非非. 我真心不想打破她的憧憬,因为无论干任何行业,有人,就有矛盾,就有斗争. 我是那名失败者,仅仅想安安稳稳 ...

  4. 网页首页制作总结(div+css+javascript)

    一.对网页整体布局,分几个版块 如下图所示: 确定布局之后,规划好网页,准备素材,按照标准文档流的顺序,从上到下,从左到右写入代码. 以上图为例,分为两部分,红色的主体部分和页脚.主体部分分割为头部. ...

  5. WeX5 快速开发平台 V3.6 正式版发布

    WeX5 V3.6 正式版核心特性:一.打包特性增强: 1- 提供多WebView选择,引入腾讯X5引擎,可自动适配移动设备环境进行切换,使通过X5打包生成的App具备更高的兼容性及更小的文件尺寸: ...

  6. Oracle GoldenGate for Big Data 12.2.0.1的新特性

    ogg for bigdata 12.2已经发布,新增有如下特性:支持java replicat进程OGG12.2中开发了基于java的replicat模式,以前的版本是基于extract进程中使用u ...

  7. (zz) 谷歌技术"三宝"之BigTable

    006年的OSDI有两篇google的论文,分别是BigTable和Chubby.Chubby是一个分布式锁服务,基于Paxos算法:BigTable是一个用于管理结构化数据的分布式存储系统,构建在G ...

  8. ViewHolder简洁写法

    ViewHolder holder = null;         if(convertView == null){                 convertView = mInflater.i ...

  9. Padding Oracle Attack的一些细节与实现

    Padding Oracle Attack还是颇具威力的,ASP.NET的Padding Oracle Attack被Pwnie评为2010年最佳服务端漏洞之一.还是看 Juliano Rizzo a ...

  10. (转)PhoneGap开发环境搭建

    (原)http://www.cnblogs.com/Random/archive/2011/12/28/2305398.html PhoneGap开发环境搭建   项目中要用PhoneGap开发,了解 ...