将文本输入框内容加入表中的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 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
js操作ajax返回的json的注意问题!
Feb 23 Javascript
js 小贴士一星期合集
Apr 07 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
three.js 制作动态二维码的示例代码
Jul 31 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/09/13 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
JS 实现百度搜索功能
2018/02/01 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
详解python中的 is 操作符
2017/12/26 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
Pycharm更换python解释器的方法
2018/10/29 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
Python猴子补丁知识点总结
2020/01/05 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
电子专业推荐信范文
2013/11/18 职场文书
学习党代会心得体会
2014/09/05 职场文书
公司周年庆典标语
2014/10/07 职场文书
2014年车间工作总结
2014/11/21 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL