将文本输入框内容加入表中的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 相关文章推荐
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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
2006/10/09 PHP
生成静态页面的PHP类
2006/11/25 PHP
php 时间计算问题小结
2009/01/04 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
深入理解React高阶组件
2017/09/28 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python 列表(List)操作方法详解
2014/03/11 Python
Python 元组(Tuple)操作详解
2014/03/11 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python中__name__的使用实例
2015/04/14 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
给老婆的搞笑检讨书
2014/01/12 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
python实现简单反弹球游戏
2021/04/12 Python