将文本输入框内容加入表中的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 tools之tooltip
Jul 25 Javascript
将查询条件的input、select清空
Jan 14 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 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 分页原理详解
2009/08/21 PHP
php生成shtml类用法实例
2014/12/09 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
python实现清屏的方法
2015/04/30 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
Python map及filter函数使用方法解析
2020/08/06 Python
python开发入门——set的使用
2020/09/03 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
Python实现自动整理文件的脚本
2020/12/17 Python
技校教师求职简历的自我评价
2013/10/20 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
货款欠条范本
2015/07/03 职场文书
初二英语教学反思
2016/02/15 职场文书