将文本输入框内容加入表中的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 pagination插件实现无刷新分页代码
Oct 13 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
js和php如何获取当前url的内容
Sep 22 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
微信小程序复选框实现多选一功能过程解析
Feb 14 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
php 运行效率总结(提示程序速度)
2009/11/26 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
10款最好的Web开发的 Python 框架
2015/03/18 Python
Python中使用partial改变方法默认参数实例
2015/04/28 Python
python模块之time模块(实例讲解)
2017/09/13 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
django 读取图片到页面实例
2020/03/27 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
劳资人员岗位职责
2013/12/19 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
教师演讲稿大全
2014/05/16 职场文书
迁户口计划生育证明
2014/10/19 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
故宫英文导游词
2015/01/31 职场文书
公司员工手册范本
2015/05/14 职场文书
创业计划书之宠物店
2019/09/19 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
一文带你探究MySQL中的NULL
2021/11/11 MySQL