码迷,mamicode.com
首页 > Web开发 > 详细

JS动态添加表格 一

时间:2019-01-30 18:33:08      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:gif   meta   child   数组   rip   add   nbsp   key   增加   

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

JS动态添加表格 一

标签:gif   meta   child   数组   rip   add   nbsp   key   增加   

原文地址:https://www.cnblogs.com/skiwnchqhh/p/10339028.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!