将文本输入框内容加入表中的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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
一个可复用的vue分页组件
May 15 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
JS原型与继承操作示例
May 09 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 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/10/05 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
简明 Python 基础学习教程
2007/02/08 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
Python常见异常分类与处理方法
2017/06/04 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
如何写一份好的自荐信
2014/01/02 职场文书
保护环境建议书100字
2014/05/13 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电