将文本输入框内容加入表中的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 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
实现vuex原理的示例
Oct 21 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
给老婆的婚前保证书
2014/02/01 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
社区元宵节活动总结
2015/02/06 职场文书
应届生简历自我评价
2015/03/11 职场文书
报案材料怎么写
2015/05/25 职场文书
风之谷观后感
2015/06/11 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
mysql sock文件存储了什么信息
2022/07/15 MySQL
基于Python实现nc批量转tif格式
2022/08/14 Python