将文本输入框内容加入表中的js代码
发布时间：2024-04-28 09:50:40
标签：文本输入框,表格,javascript
<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>
0
投稿猜你喜欢
前言：要说小时候称霸所有翻盖手机的小游戏，除了贪吃蛇，那就是推箱子了。控制小人将所有箱子放到指定位置，就是这样简简单单的操作，陪伴我度过了无- 具体用到了matplotlib.backends.backend_qt5agg.FigureCanvasQTAgg直接上代码(这里给出的只是
- 在知识库的建立的时候，用普通VARCHAR2存放文章是显然不够的，只有区区4000的字节，放不了多少字， 而CLOB数据类型，则能最多存放8
- [sql] --1.将每个老师的工资更新为原来的工资+奖金 --定义两个变量，用来存储ttid与reward declare @tid in
- 一：建立对象引用计数1. 相关代码void_Py_NewReference(PyObject *op){ if (
- 前言在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大
- 目前很多公司业务已经上云，使用了大量的云主机。当前大多数云厂商的云主机公网都是采用的eip，也就是内网和外网使用的同一张网卡，所以流量全部经
- 在众多的浏览器产品中，IE、Firefox、Opera、Safari........众多品牌却标准不一，因此时常需要根据不同的浏览器，甚至相
- 本文和大家重点讨论一下Perl split函数的用法，Perl中的一个非常有用的函数是Perl split函数-把字符串进行分割并把分割后的
- 本文实例讲述了GO语言实现列出目录和遍历目录的方法。分享给大家供大家参考。具体如下：GO语言获取目录列表用 ioutil.ReadDir()
- 本文实例讲述了Python中统计函数运行耗时的方法。分享给大家供大家参考。具体实现方法如下：import timedef time_me(f
- 前言在前几年，如果你和嵌入式开发人员推荐Python，大概会是这样一种场景：A：”诶，老王，你看Python开发这么方便
- 这个类可以用来搜索在给定的文本目录中的文件。 它可以给定目录遍历递归查找某些文件扩展名的文件。 并打开找到的文件，并检查他们是否包含搜索词语
- 前言平台：windows 10.0python 3.8oraclemysql目的需要通过python处理数据，并将结果保存至SQL数据库中，
- MSSQL差异备份，就是和前一次备份作对比，把不一样的内容备份下来，这样，只要前一次备份后，插入新的内容，差异备份就可以把刚插入的内容备份出
- Python 处理 xml 文档的方法有很多，除了经典的 sax 和 dom 之外，还有一个 ElementTree。首先 import 之
- 前言大家好，我是阿光。本专栏整理了《图神经网络代码实战》，内包含了不同图神经网络的相关代码实现（PyG以及自实现），理论与实践相结合，如GC
- 一、下载xlsx插件npm i xlsx二、通过element-ui组件的upload组件上传文件<el-upload
- 一、使用+号添加列表元素一般情况下两个列表合并起来也是一种添加元素的方法，只要使用+号直接进行运算就可以了，下面是演示代码。name1 =
- <script language='javascript' for='document' event=
