标签：
将文本框内容添加到表格中的行代码实例:
在实际操作中，往往需要将文本框中的内容添加到表格的行中或者类似的情况，下面就通过一个实例介绍一下如何实现此效果，希望能够对需要的朋友有所帮助，代码如下:
<!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/
标签：
原文地址：http://www.cnblogs.com/nulifendou/p/5092789.html
