JS动态添加表格(一)

最新推荐文章于 2021-06-08 14:38:34 发布

失传的大海

最新推荐文章于 2021-06-08 14:38:34 发布

阅读量580

点赞数

文章标签： xhtml javascript ViewUI

利用document.createElement(), appendChild()方法可以动态创建和添加表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <script type="text/javascript"> var index = 3; //行数 var number = 4; //序号 var oTR = new Array(); //创建一个TR数组 function add(){ index = index+1; oTR[index] = document.createElement("tr"); //TR var oTD = document.createElement("<td>"); //创建TD oTD.innerHTML = number++; oTR[index].appendChild(oTD); //添加TR的子元素TD oTD = document.createElement("<td></td>") oTR[index].appendChild(oTD); oTD = document.createElement("<td></td>") oTR[index].appendChild(oTD); oTD = document.createElement("<td></td>") oTR[index].appendChild(oTD); oTD = document.createElement("<td></td>") oTR[index].appendChild(oTD); document.getElementById("mytbody").appendChild(oTR[index]); //将TR添加到tbody中 } </script> <body> <table border="1" width="40%" align="center"> <tr> <th>序号</th><th>询价内容</th><th>数量</th><th>单位</th><th>单价(元)</th> </tr> <tbody id="mytbody"> <tr> <td>1</td><td></td><td></td><td></td><td></td> </tr> <tr> <td>2</td> <td></td><td></td><td></td><td></td> </tr> <tr> <td>3</td> <td></td><td></td><td></td><td></td> </tr> </tbody> <tr> <td colspan="4"></td><td align="right"><a href="javascript:add()">+增加</a></td> </tr> </table> </body> </html>