这是之前突发奇想地用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. 【转】Nginx+Tomcat+Memcached集群

    Tomcat集群session同步方案有以下几种方式: 使用tomcat自带的cluster方式,多个tomcat间自动实时复制session信息,配置起来很简单.但这个方案的效率比较低,在大并发下表 ...

  2. Java中二维数组与面向对象

    1:二维数组(理解) (1)元素是一维数组的数组. (2)格式: A:数据类型[][] 数组名 = new 数据类型[m][n]; B:数据类型[][] 数组名 = new 数据类型[m][]; C: ...

  3. uoot启动过程

    1.从我们的start_armboot开始讲起 u-boot整体由汇编段和C语言段外加连接脚本组成.关于汇编段请看我之前的博客<u-boot源码汇编段简要分析>,好,让我们进入start_ ...

  4. idea中如何配置tomcat

    这几天想通过JDBC驱动使用MySQL数据库,但老是运行不成功,但是写成java就没有问题,于是想到是不是服务器没配置好 idea中配置tomcat的步骤如下 1:File->Settings. ...

  5. HDU 4822----其实不会这个题

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=4822 并不会做这个题,题解说是LCA(最近公共祖先),并不懂,说一下我自己的思路吧,虽然没能实现出来. 题 ...

  6. 【LeetCode OJ】Binary Tree Level Order Traversal II

    Problem Link: https://oj.leetcode.com/problems/binary-tree-level-order-traversal-ii/ Use BFS from th ...

  7. Linux------小网盘(1)

    一:要求 利用Linux Socket进行文件传输,本次只支持client端向sever端上传文件 二:实现提示: client.c client的参数有两个,分别是服务器主机名和端口: 在while ...

  8. Python 基礎 - pyc 是什麼

    Python2.7 版中,只要執行 .py 的檔案後,即會馬上產生一個 .pyc 的檔案,而在 Python3 版中,執行 .py 的檔案後,即會產生一個叫 __pycache__ 的目錄,裡面也會有 ...

  9. Understanding Linux /proc/cpuinfo

    http://www.richweb.com/cpu_info A hyperthreaded processor has the same number of function units as a ...

  10. 收集的maven 仓库地址(maven repository)

    maven 仓库地址: 共有的仓库http://repo1.maven.org/maven2/http://repository.jboss.com/maven2/http://repository. ...