JS动态平添表格(一)-JavaSript-爱易网页

JS动态平添表格(一)

日期：2014-05-16　浏览次数：20402 次

JS动态添加表格(一)

利用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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JS动态平添表格(一)

相关资料更多>

推荐阅读更多>