014-动态添加表格内容

最新推荐文章于 2023-05-26 18:08:02 发布

编码的三叔

最新推荐文章于 2023-05-26 18:08:02 发布

阅读量353

点赞数

分类专栏： DOM详解 DOM详解文章标签： JS为table动态添加表格元素及内容

本文链接：https://blog.csdn.net/ppwwp/article/details/88560877

版权

DOM详解同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

DOM详解

16 篇文章 0 订阅

订阅专栏

表格元素、表格行则另有添加子元素的方法。实际上，他们可以再添加子元素的同时创建这些子元素。也就是说，添表格子元素时，往往无须使用document的createElement()方法来创建节点。

HTMLTableElement对象有如下方法：

insertRow(index):在index处插入一行。返回新创建的HTMLTableRowElement。
createCaption():为该表格创建标题。返回创建的HTMLTableCaptionElement。如果该表格已有标题，则返回已有的标题对象。
createTFoot():为该表格创建<tfoot……/>元素。返回新创建的HTMLTableFootElement。如果该表格已有<tfoot……/>元素，则返回已有的<tfoot……/>元素
createTHead():为该表格创建<thead……/>元素。返回新创建的HTMLTableHeadElment。如果该表格已有<thead……/>元素，则返回已有的<thead……/>元素。

HTMLTableRowElement对象代表表格行，该对象包含如下方法用于插入表格。

insertCell(index):在index处创建一个单元格，返回新创建的单元格。

下面通过脚本在页面中动态生成一个表格。

	<!DOCTYPE html>
	<html>
		<head>
			<meta http-equiv="content-type" content="text/html"/>
			<title>动态添加表格内容</title>
			
		</head>
		<body id='test'>
			<script type="text/javascript">
				var a = document.createElement("table");
				a.style.width = "800px";
				a.style.borderCollapse = "collapse";
				
				a.border = 1;
				//为表格创建标题
				var caption = a.createCaption();
				caption.innerHTML = "这是一首简单的小情歌";
				//为表格循环插入5行
				for(var i = 0;i<5;i++){
					//插入行
					var tr = a.insertRow(i);
					//为每行插入7列
					for(var j=0;j<7;j++){
						//村换插入插入7列
						var td = tr.insertCell(j);
						td.style.padding = "5px";
						//设置每个单元格的内容
						td.innerHTML = "小情歌"+i+j;
					}
				}
				document.getElementById("test").appendChild(a);
			</script>
		</body>
	</html>

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

在这里插入图片描述
如上图的表格结构为HTMLTableElement–>HTMLRowElement–>HTMLCellElement。每个表格元素包含若干包含若干个表格行子节点，每个表格行节点又包含若干个单元格子节点。整个表格看起来其实就是个DOM树。

编码的三叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
014-动态添加表格内容

表格元素、表格行则另有添加子元素的方法。实际上，他们可以再添加子元素的同时创建这些子元素。也就是说，添表格子元素时，往往无须使用document的createElement()方法来创建节点。HTMLTableElement对象有如下方法：insertRow(index):在index处插入一行。返回新创建的HTMLTableRowElement。createCaption():为该表格创...
复制链接

扫一扫

专栏目录