将文本输入框内容加入表中的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
投稿
猜你喜欢
- 前言异步编程可以提高应用程序的性能和吞吐量,因为它可以充分利用 CPU 和 I/O 资源。当某个任务被阻塞时,事件循环可以切换到另一个任务,
- 本文实例讲述了Python使用pickle模块储存对象操作。分享给大家供大家参考,具体如下:众所周知,当我们需要储存数据的时候,就需要用到重
- 本文实例讲述了Python找出list中最常出现元素的方法。分享给大家供大家参考,具体如下:假设一个list中保存着各种元素,需要统计每个元
- 支付宝支付和微信支付是当今互联网产品常用的功能,我使用Django Rest Framework实现了网页上支付宝支付和微信支付的一个通用服
- 函数:split()Python中有split()和os.path.split()两个函数,具体作用如下:split():拆分字符串。通过指
- 第一个博客,大概就是开始学数据库了,然后自己下载各种搞不定,各种问题,百度也不是很好用,问了下也没什么结果,后来总算搞定,但是花了很长时间,
- APSchedulerAPScheduler 四个组件分别为:调度器(scheduler)、触发器(trigger),作业存储(job st
- 如何在线删除表或索引? <%Set conn1 = Server.CreateObject(&
- selenium+python,使用webdriver的截图函数get_screenshot_as_file()截图,代码如下:from s
- Python通过yield提供了对协程的基本支持,但是不完全。而第三方的gevent为Python提供了比较完善的协程支持。gevent是第
- composer是PHP中非常优秀的一个包管理工具,可以帮助我们来管理项目所需要依赖的所有包以及插件,也可以用来从packagist中创建一
- 工作中我们经常需要判断某个变量/属性是否为undefined。通常有两种写法// 方式1 typeof age === 'undef
- 本文实例讲述了Python3多进程 multiprocessing 模块。分享给大家供大家参考,具体如下:多进程 Multiprocessi
- 很多时候,我们都需要获取windows消息提示框的文本内容,例如系统异常信息,软件错误提示等。。。但是如何获取提示信息呢?通常我们的印象中,
- 我们都有过函数调用的经历,那么call调用类实例的过程就跟函数很相似。类的用法很多人都知道了,类实例又是什么呢?可以把类看成一个设计图,类实
- 我们可以通过这样子的方式去理解apache的工作原理1 单进程TCP服务(堵塞式)这是最原始的服务,也就是说只能处理个客户端的连接,等当前客
- 例子:http.Handle("/tmpfiles/", http.StripPrefix("/tmpfile
- 这两个字符串真实长度和取固定长度的字符串函数是在 photo.163.com 的js文件里看到的。 作者&nb
- 在代码中添加以下两行可以解决:torch.backends.cudnn.enabled = Truetorch.backends.cudnn
- 三元运算又称三目运算,是对简单的条件语句的简写简单条件语句:if 条件成立: val = 1else: val =