将文本输入框内容加入表中的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 相关文章推荐
innerText和innerHTML 一些问题分析
May 18 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
详解JavaScript对象类型
Jun 16 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
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根据IP地址获取所在城市具体实现
2013/11/27 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
python使用turtle库绘制时钟
2020/03/25 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
python元组的概念知识点
2019/11/19 Python
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
行政人员岗位职责
2013/12/08 职场文书
服装机修工岗位职责
2013/12/26 职场文书
实习评语大全
2014/04/26 职场文书
设计师求职信模板
2014/05/06 职场文书
撤诉申请怎么写
2015/05/19 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书