将文本输入框内容加入表中的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 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
javascript实现控制div颜色
Jul 07 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 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中调用JAVA
2006/10/09 PHP
信用卡效验程序
2006/10/09 PHP
php随机输出名人名言的代码
2012/10/07 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
给ECShop添加最新评论
2015/01/07 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
奇妙的js
2007/09/24 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
javascript常见用法总结
2014/05/22 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
Python Tkinter简单布局实例教程
2014/09/03 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
详解python 注释、变量、类型
2018/08/10 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
阅兵口号
2014/06/19 职场文书
高考学习决心书
2015/02/04 职场文书
培训班通知
2015/04/25 职场文书
行政复议答复书
2015/07/01 职场文书