将文本输入框内容加入表中的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 相关文章推荐
JS读取XML文件示例代码
Nov 15 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
JavaScript私有变量实例详解
Jan 24 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
JavaScript仿京东轮播图效果
Feb 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将会员数据导入到ucenter的代码
2010/07/18 PHP
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
FireFox中textNode分片的问题
2007/04/10 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中用max()方法求最大值的介绍
2015/05/15 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
用python实现一个简单的验证码
2020/12/09 Python
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
一套软件测试笔试题
2014/07/25 面试题
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
师德承诺书
2015/01/20 职场文书
团代会邀请函
2015/02/02 职场文书
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python
Python实现双向链表
2022/05/25 Python
vue router 动态路由清除方式
2022/05/25 Vue.js