将文本输入框内容加入表中的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 相关文章推荐
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 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
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
js获取url传值的方法
2015/12/18 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
python实现杨辉三角思路
2017/07/14 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
python可以用哪些数据库
2020/06/22 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
医院护士的求职信
2014/01/03 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
2016公司年会通知范文
2015/04/25 职场文书
原告代理词范文
2015/05/25 职场文书
地球上的星星观后感
2015/06/02 职场文书
小学中队长竞选稿
2015/11/20 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书