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>


原文地址:https://www.cnblogs.com/itmyhome/p/4131581.html