将文本输入框内容加入表中的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学习笔记7 原型链的原理
Jan 11 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 Javascript
js 实现验证码输入框示例详解
Sep 23 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中Apache、php、mysql 默认安装路径
2013/06/25 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
实例分析javascript中的异步
2020/06/02 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
python数据结构之列表和元组的详解
2017/09/23 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
Python 的AES加密与解密实现
2019/07/09 Python
python 递归相关知识总结
2021/03/03 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
Windows和Linux动态库应用异同
2016/04/17 面试题
四风存在的原因分析
2014/02/11 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
法制宣传标语
2014/06/23 职场文书
5.12护士节活动总结
2015/02/10 职场文书
英语导游词
2015/02/13 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python