手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >将文本输入框内容加入表中的js代码
将文本输入框内容加入表中的js代码
摘要:复制代码代码如下:表格处理.html姓名邮箱地址jzy359@qq.com重庆jzy359@qq.com重庆document.getElem...

复制代码 代码如下:

<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">

<>

</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>

【将文本输入框内容加入表中的js代码】相关文章:

在页面中输出当前客户端时间javascript实例代码

设为首页 加入收藏的js代码

Jquery动态添加输入框的方法

强制设为首页代码

jQuery结合ajax实现动态加载文本内容

你一定会收藏的Nodejs代码片段

一段实时更新的时间代码

Js和JQuery获取鼠标指针坐标的实现代码分享

实现DIV圆角的JavaScript代码

将HTML自动转为JS代码

精品推荐
分类导航