将文本输入框内容加入表中的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的分页控件(C#)
Jan 06 Javascript
js判断字符长度以及中英文数字等
Dec 31 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
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里的JS打印函数
2006/10/09 PHP
php使用websocket示例详解
2014/03/12 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
python的re正则表达式实例代码
2018/01/24 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
Python如何在bool函数中取值
2020/09/21 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
网站设计师的岗位职责
2013/11/21 职场文书
民族团结先进个人材料
2014/02/05 职场文书
亲子活动总结
2014/04/26 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
甘南现象心得体会
2014/09/11 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python