将文本输入框内容加入表中的js代码

代码如下:

<SPAN style="FONT-SIZE: 14px"><!DOCTYPE html>
<html>
<head>
<title>表格处理.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>
<form id="form1">
<input type="text" id="iname">
<input type="text" id="iemail">
<input type="text" id="iaddress">
<input type="button" value="提交" id="submit">
</form>

<hr>

<table border="1" id="border">
<tr>
<td id="name">姓名</td>
<td id="email">邮箱</td>
<td id="address">地址</td>
</tr>
<tr>
<td id="name">jzy</td>
<td id="email">359@qq.com</td>
<td id="address">重庆</td>
</tr>
<tr>
<td id="name">jzy</td>
<td id="email">359@qq.com</td>
<td id="address">重庆</td>
</tr>
</table>
</body>
<script>
document.getElementById("submit").onclick=function(){
//alert("success");
//获取输入节点
var nameElement=document.getElementById("iname");
var emailElement=document.getElementById("iemail");
var addresssElement=document.getElementById("iaddress");

//创建表格节点
var trNode=document.createElement("tr");
var nameNode=document.createElement("td");
var emailNode=document.createElement("td");
var addressNode=document.createElement("td");

//向表格中添加创建的节点及文本内容
var borderElement=document.getElementById("border");
borderElement.appendChild(trNode);
trNode.appendChild(nameNode);
trNode.appendChild(emailNode);
trNode.appendChild(addressNode);
var nametextNode=document.createTextNode(nameElement.value);
var emailtextNode=document.createTextNode(emailElement.value);
var addresstextNode=document.createTextNode(addresssElement.value);
nameNode.appendChild(nametextNode);
emailNode.appendChild(emailtextNode);
addressNode.appendChild(addresstextNode);

}
</script>
</html>
</SPAN>

赞 (0)

相关推荐

  • 将文本输入框内容加入表中的js代码

    复制代码 代码如下: <SPAN style="FONT-SIZE: 14px"><!DOCTYPE html> <html> <head> <title>表格处理.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv=&

  • 解决eclipse中没有js代码提示的问题

    解决eclipse中没有js代码提示的问题

    自学js,发现eclipse中不管js文件.html文件.jsp文件没有都没js代码的提示,对于js代码也不报错,有时候就因为单词敲错却查了很久没查出来,很烦很难受. 在网上找了很多方法,都没有解决,特别是有个在javascript中editor中content assit里改一个地方为zjs的方法,试了几次也没成功,不知道各位老铁有没有成功? 再后来,我下了个插件,问题就解决了. 打开eclipse点击window旁边的Help选项---> Eclipse Marketplace---> 在

  • Eclipse中实现JS代码提示功能（图文教程）

    用Eclipse写JS代码时没有提示,很烦,心累: 找个各种方法以及插件,试了一下,个人感觉AngularJS Eclipse 插件很强,好用,不多说,先装上: 然后重启Eclipse ,右键你的项目 convert to Tern Project 也行 根据自己的需要变动,直接OK,接下来就是见证奇迹的时刻: 如果要变动就右键项目 总结 以上所述是小编给大家介绍的Eclipse中实现JS代码提示功能(图文教程),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常

  • java图片和文本同时提交到表单的实例代码

    java图片和文本同时提交到表单的实例代码

    首先来看如下效果图片: 表单代码: <form action="/addPro" method="post" enctype="multipart/form-data"> <a>宠物(或产品)类型:</a><select id="categoryID" name="cid"></select><br/><br/> <a

  • MySql中把一个表的数据插入到另一个表中的实现代码

    小编今天在写一个 将一个数据库的表数据 导入到 另一个数据库的表的时候 我是这么写的 复制代码 代码如下: <?php header("Content-type:text/html;charset=utf-8"); $conn = mysql_connect("localhost","root","");mysql_select_db('nnd',$conn);mysql_select_db('ahjk',$conn);

  • Ajax中通过JS代码自动获取表单元素值的示例代码

    我们在使用Ajax的时候,通常需要获取表单元素值,然后发送给后台的服务器端程序处理.如果表单元素不多的情况我们常常会通过GET方式来获取表单元素值,但如果表单元素非常多,此时就需要用POST方式来获取表单元素值,那么如何来获取表单元素值呢?下面给出一段JS代码即可自动获取表单元素的值了. function getFormQueryString(frmID) //frmID是表单的ID号,请在表单form中先命名一个ID号 { var frmID=document.getElementById(f

  • 使用PyV8在Python爬虫中执行js代码

    前言 可能很多人会觉得这是一个奇葩的需求,爬虫去好好的爬数据不就行了,解析js干嘛?吃饱了撑的? 搜索一下互联网上关于这个问题还真不少,但是大多数童鞋是因为自己的js基础太烂,要么是HTML基础烂,要么ajax基础烂,反正各方面都很烂.基础这么渣不好好去学基础写什么爬虫? 那你肯定要问了"请问我的朋友,你TM怎么也有这个需求?莫非你是个技术渣?" 非也非也,博主作为一个拥有3年多前端经验的攻城尸,怎么会被这个问题给难倒呢,老夫今天遇到的问题很显然没有那么简单. 问题 那么博主到底是遇到

  • 禁止空格提交表单的js代码

    在做项目的时候,有个页面我用到了ckeditor,可是问题来了,我在只要有文本框的地方按下回车键就会自动刷新.最后终于找到了解决的方法: 复制代码 代码如下: <input type="text" name="mes.mesTitle" value="<s:property value='mes.mesTitle'/>" class="InputStyle" onkeydown="keydown(t

  • 防止网站内容被小偷采集的js代码 原创

    防止网站内容被小偷采集的ASP代码看了一下asp的,因为我的站是静态的所以就凑手写了个静态的javascript版的.具体就不详细说明了:欢迎讨论,原创转载请说明 复制代码 代码如下: <script language="JavaScript"> function setCookie(name, value, expires, path, domain, secure) {         var curCookie = name + "=" + esc

  • C/C++读写注册表中二进制数据(代码示例)

    1.RegOpenKeyEx 函数: 原形: LONG RegOpenKeyEx(               HKEY hKey,     // 要打开主键名               LPCTSTR lpSubKey, // 需要打开的子键或路径               DWORD ulOptions,  // 保留,为0              REGSAM samDesired, // 操作权限标志               PHKEY phkResult  // 指向你打开键

随机推荐