首页 > 语言 > JavaScript > 正文

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

2024-05-06 15:50:48
字体:
来源:转载
供稿:网友
将文本内容添加到表格中在实际应用中很常见,下面为大家简要介绍下具体的实现过程,感兴趣的朋友可以参考下

复制代码 代码如下:


<SPAN><!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 type="text/css" href="./styles.css">-->

</head>

<body>
<form>
<input type="text">
<input type="text">
<input type="text">
<input type="button" value="提交">
</form>

<hr>

<table>
<tr>
<td>姓名</td>
<td>邮箱</td>
<td>地址</td>
</tr>
<tr>
<td>jzy</td>
<td>359@qq.com</td>
<td>重庆</td>
</tr>
<tr>
<td>jzy</td>
<td>359@qq.com</td>
<td>重庆</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>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选