通过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方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...
随机推荐
- 【转】Nginx+Tomcat+Memcached集群
Tomcat集群session同步方案有以下几种方式: 使用tomcat自带的cluster方式,多个tomcat间自动实时复制session信息,配置起来很简单.但这个方案的效率比较低,在大并发下表 ...
- Java中二维数组与面向对象
1:二维数组(理解) (1)元素是一维数组的数组. (2)格式: A:数据类型[][] 数组名 = new 数据类型[m][n]; B:数据类型[][] 数组名 = new 数据类型[m][]; C: ...
- uoot启动过程
1.从我们的start_armboot开始讲起 u-boot整体由汇编段和C语言段外加连接脚本组成.关于汇编段请看我之前的博客<u-boot源码汇编段简要分析>,好,让我们进入start_ ...
- idea中如何配置tomcat
这几天想通过JDBC驱动使用MySQL数据库,但老是运行不成功,但是写成java就没有问题,于是想到是不是服务器没配置好 idea中配置tomcat的步骤如下 1:File->Settings. ...
- HDU 4822----其实不会这个题
题目:http://acm.hdu.edu.cn/showproblem.php?pid=4822 并不会做这个题,题解说是LCA(最近公共祖先),并不懂,说一下我自己的思路吧,虽然没能实现出来. 题 ...
- 【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 ...
- Linux------小网盘(1)
一:要求 利用Linux Socket进行文件传输,本次只支持client端向sever端上传文件 二:实现提示: client.c client的参数有两个,分别是服务器主机名和端口: 在while ...
- Python 基礎 - pyc 是什麼
Python2.7 版中,只要執行 .py 的檔案後,即會馬上產生一個 .pyc 的檔案,而在 Python3 版中,執行 .py 的檔案後,即會產生一個叫 __pycache__ 的目錄,裡面也會有 ...
- Understanding Linux /proc/cpuinfo
http://www.richweb.com/cpu_info A hyperthreaded processor has the same number of function units as a ...
- 收集的maven 仓库地址(maven repository)
maven 仓库地址: 共有的仓库http://repo1.maven.org/maven2/http://repository.jboss.com/maven2/http://repository. ...