将文本输入框内容加入表中的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 相关文章推荐
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
PHP4与PHP5的时间格式问题
2008/02/17 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
python用来获得图片exif信息的库实例分析
2015/03/16 Python
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
武汉东之林科技有限公司机试
2013/09/17 面试题
中国梦演讲稿5分钟
2014/08/19 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
2015年端午节活动总结
2015/02/11 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android