将文本输入框内容加入表中的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 相关文章推荐
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
JS实现页面炫酷的时钟特效示例
Aug 14 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实例分享之二维数组排序
2014/05/15 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
js实现网页随机验证码
2020/10/19 Javascript
Python读写Json涉及到中文的处理方法
2016/09/12 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
师范毕业生个人求职信
2013/12/09 职场文书
播音主持专业个人自我评价
2014/01/09 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
群众路线专项整治方案
2014/10/27 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
开幕式邀请函
2015/01/31 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python