你的位置:首页 > Java教程

[Java教程]将文本框内容添加到表格中的行代码实例


将文本框内容添加到表格中的行代码实例:
在实际操作中,往往需要将文本框中的内容添加到表格的行中或者类似的情况,下面就通过一个实例介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码如下:

 

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