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


Posted in Javascript onAugust 18, 2013
<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>
Javascript 相关文章推荐
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
关于延迟加载JavaScript
May 05 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
面包屑导航详解
Dec 07 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 Javascript
js css后面所带参数含义介绍
Aug 18 #Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 #Javascript
向左滚动文字 js代码效果
Aug 17 #Javascript
热点新闻滚动特效的js代码
Aug 17 #Javascript
js 获取radio按钮值的实例
Aug 17 #Javascript
js 文本滚动效果的实例代码
Aug 17 #Javascript
javascript用户注册提示效果的简单实例
Aug 17 #Javascript
You might like
PHP抽象类 介绍
2012/06/13 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
一个php+js实时显示时间问题
2015/10/12 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
Python base64编码解码实例
2015/06/21 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
对numpy中shape的深入理解
2018/06/15 Python
python实现电子产品商店
2019/02/26 Python
python制作图片缩略图
2019/04/30 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
基于python3生成标签云代码解析
2020/02/18 Python
python模块如何查看
2020/06/16 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
python怎么删除缓存文件
2020/07/19 Python
python编写实现抽奖器
2020/09/10 Python
python 多线程中join()的作用
2020/10/29 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
青年教师培训方案
2014/02/06 职场文书
大学军训感言200字
2014/02/26 职场文书
开学季活动策划方案
2014/02/28 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
师德师风剖析材料
2014/09/30 职场文书
求职导师推荐信范文
2015/03/27 职场文书
李强为自己工作观后感
2015/06/11 职场文书
宣传委员竞选稿
2015/11/19 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
python如何进行基准测试
2021/04/26 Python
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android