将文本输入框内容加入表中的js代码

所属分类: 网络编程 / JavaScript 阅读数: 1687
收藏 0 赞 0 分享
复制代码 代码如下:

<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 this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多