原生JS创建一个简单的table表格

最新推荐文章于 2024-05-16 16:52:30 发布

火乐暖阳85105

最新推荐文章于 2024-05-16 16:52:30 发布

阅读量1k

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_47938715/article/details/131519660

版权

创建5行20列的表格，值不够的设为空，如图下：

案例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

		</style>
	</head>
	<body>
		<div id="box">
            <!-- //创建一个表格 5行20列 -->
		</div>

		<script type="text/javascript">
			date = [ [4, 5, 6,7,8,9,10,11,12,13,14,15], [7, 8, 9], [10, 11, 12], [13, 14, 15]];  //数据
            let days = 20;  //设置固定的列数
			//先定义一个大容器table，用来存放下面的tr和td
			var table = document.createElement("table");  //创建table标签，
			table.border = 1 ;
			table.rules  = 'all' ;
            
			for (var i = 0; i < 5; i++) {  // 循环 渲染5行
				var tr = document.createElement("tr"); //创建tr标签，
                let tr_data = date[i];

                for (var j = 0; j < days; j++) { //循环 渲染列
                    var td = document.createElement("td") //创建td标签
                    if(tr_data !== undefined && tr_data[j]){
                        var text = document.createTextNode(tr_data[j]) //创建文本内容
                    }else{
                        var text = document.createTextNode('') 
                    }
                    td.align   = 'center' ;
                    td.width = 40;
                    td.height = 40;
                    td.appendChild(text) 
                    tr.appendChild(td); 
                }
				table.appendChild(tr); //将tr插入table内
			}

			document.getElementById("box").appendChild(table) //将table插入box内，完成table创建
		</script>

	</body>
</html>