提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

JS代码 内容 文本 加入 表中 输入框
2023-06-13 09:15:04 时间
复制代码代码如下:

<SPANstyle="FONT-SIZE:14px"><!DOCTYPEhtml>
<html>
<head>
<title>表格处理.html</title>

<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="thisismypage">
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">

<!--<linkrel="stylesheet"type="text/css"href="./styles.css">-->

</head>

<body>
<formid="form1">
<inputtype="text"id="iname">
<inputtype="text"id="iemail">
<inputtype="text"id="iaddress">
<inputtype="button"value="提交"id="submit">
</form>

<hr>

<tableborder="1"id="border">
<tr>
<tdid="name">姓名</td>
<tdid="email">邮箱</td>
<tdid="address">地址</td>
</tr>
<tr>
<tdid="name">jzy</td>
<tdid="email">359@qq.com</td>
<tdid="address">重庆</td>
</tr>
<tr>
<tdid="name">jzy</td>
<tdid="email">359@qq.com</td>
<tdid="address">重庆</td>
</tr>
</table>
</body>
<script>
document.getElementById("submit").onclick=function(){
//alert("success");
//获取输入节点
varnameElement=document.getElementById("iname");
varemailElement=document.getElementById("iemail");
varaddresssElement=document.getElementById("iaddress");

//创建表格节点
vartrNode=document.createElement("tr");
varnameNode=document.createElement("td");
varemailNode=document.createElement("td");
varaddressNode=document.createElement("td");

//向表格中添加创建的节点及文本内容
varborderElement=document.getElementById("border");
borderElement.appendChild(trNode);
trNode.appendChild(nameNode);
trNode.appendChild(emailNode);
trNode.appendChild(addressNode);
varnametextNode=document.createTextNode(nameElement.value);
varemailtextNode=document.createTextNode(emailElement.value);
varaddresstextNode=document.createTextNode(addresssElement.value);
nameNode.appendChild(nametextNode);
emailNode.appendChild(emailtextNode);
addressNode.appendChild(addresstextNode);

}
</script>
</html>
</SPAN>

相关文章