将文本框内容添加到表格中的行代码实例:
在实际操作中，往往需要将文本框中的内容添加到表格的行中或者类似的情况，下面就通过一个实例介绍一下如何实现此效果，希望能够对需要的朋友有所帮助，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>添加单元格的行-蚂蚁部落</title>
<style type="text/css">
body
{
font-size:12px;
}
#mytable
{
width:400px;
border-collapse:collapse;
}
td
{
border:1px solid green;
height:30px;
line-height:30px;
text-align:center;
}
input
{
width:120px;
}
</style>
<script type="text/javascript">
function addRow()
{
var nameElement=document.getElementById("iname");
var addressElement=document.getElementById("iaddress");
var targetElement=document.getElementById("itarget");
var trNode=document.createElement("tr");
var nameNode=document.createElement("td");
var addressNode=document.createElement("td");
var targetNode=document.createElement("td");
var tableElement=document.getElementById("mytable");
tableElement.appendChild(trNode);
trNode.appendChild(nameNode);
trNode.appendChild(addressNode);
trNode.appendChild(targetNode);
var nametextNode=document.createTextNode(nameElement.value);
var addresstextNode=document.createTextNode(addressElement.value);
var targettextNode=document.createTextNode(targetElement.value);
nameNode.appendChild(nametextNode);
addressNode.appendChild(addresstextNode);
targetNode.appendChild(targettextNode);
}
window.onload=function()
{
var bt=document.getElementById("bt");
bt.onclick=addRow;
}
</script>
</head>
<body>
<form id="form1">
名称:<input type="text" id="iname">
地址:<input type="text" id="iaddress">
行业:<input type="text" id="itarget">
<input type="button" value="点击添加到表格" id="bt">
</form>
<hr>
<table id="mytable">
<tr>
<td id="name">公司名称</td>
<td id="address">地址</td>
<td id="target">从事行业</td>
</tr>
<tr>
<td id="name">蚂蚁部落</td>
<td id="address">青岛市南区</td>
<td id="target">web前端开发</td>
</tr>
<tr>
<td id="name">青岛新锐</td>
<td id="address">青岛四方区</td>
<td id="target">网站建设</td>
</tr>
</table>
</body>
</html>
以上代码实现了我们需要的功能，点击按钮可以将文本框中的内容添加到表格的行中，当然细节还是需要完善的，比如对文本框内容进行验证，这里就不做处理了，下面介绍一下次效果的实现过程。
一.实现原理:
原理非常的简单，就是当点击按钮的时候，能够将文本框中的内容以文本节点对象的形式添加到新创建的td对象中，然后将td对象添加到新创建的tr对象中，然后再将tr对象添加大table中去，这样就实现了我们想要的效果。
二.代码注释:
1.function addRow(){}，创建一个函数，此函数能够完成添加工作。
2.var nameElement=document.getElementById("iname")，获取第一个文本框对象。
3.var addressElement=document.getElementById("iaddress")，获取第二个文本框对象。
4.var targetElement=document.getElementById("itarget")，获取第三个文本框对象。
5.var trNode=document.createElement("tr")，创建一个tr节点对象。
6.var nameNode=document.createElement("td")，创建一个td节点对象，作为添加行的第一个单元格。
7.var addressNode=document.createElement("td")，创建一个td节点对象，作为添加行的第二个单元格。
8.var targetNode=document.createElement("td")，创建一个td节点对象，作为添加行的第三个单元格。
9.var tableElement=document.getElementById("mytable")，获取表格对象。
10.tableElement.appendChild(trNode)，为表格添加一个行。
11.trNode.appendChild(nameNode)，为行添加第一个单元格。
12.trNode.appendChild(addressNode)，为行添加第二个单元格。
13.trNode.appendChild(targetNode)，为行添加第三个单元格。
14.var nametextNode=document.createTextNode(nameElement.value)，创建文本节点，值为第一个文本框的内容。
15.var addresstextNode=document.createTextNode(addressElement.value)，创建文本节点，值为第二个文本框的内容。
16.var targettextNode=document.createTextNode(targetElement.value)，创建文本节点，值为第三个文本框的内容。
17.nameNode.appendChild(nametextNode)，为第一个单元格添加文本节点。
18.addressNode.appendChild(addresstextNode)，为第二个单元格添加文本节点。
19.targetNode.appendChild(targettextNode)，为第三个单元格添加文本节点。
20.window.onload=function(){}，当文档内容完全加载完毕之后再去执行函数中的代码。
21.var bt=document.getElementById("bt")，获取按钮对象。
22.bt.onclick=addRow，注册事件处理函数。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8808
更多内容可以参阅:http://www.softwhy.com/javascript/