前端

JS动态添加表格 一

云博小周宇2 Mins Read

利用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://blog.csdn.net/jiangjunshow