傻眼了!看到js用DOM这种方式创建9*9乘法表

本博文源于js基础,今天学习dom节点。dom节点可以自己创造,这也会让一些html没有写的内容经过js一变,变得活灵活现。下面通过这个案例体会一下如何自己创建完整表格打印出9*9乘法表。可谓是body里空无一物呀。

问题再现

制作一个九九乘法表

测试效果

傻眼了!看到js用DOM这种方式创建9*9乘法表_第1张图片

实现原理

使用两层for循环嵌套动态创建表格的tr和td节点,并动态设置td的内部内容,完成九九乘法表的制作。

代码讲解

    大家看到下面的代码会发现body里只有js里的代码,css代码里只有table和td的设置。都是去双重线条必须用的,美其名曰更加美观。
    js程序中外层for循环用来创建tr节点,内层负责创建td。内层循环让tr追加td。外层循环table追加tr。最后body追加table。这样就可以实现9*9乘法表。

附上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style>
        table,table tr td{ 
			border:1px solid #0094ff; }
        table {
			width: 200px; 
			min-height: 25px; 
			line-height: 25px;
			text-align: center;
			border-collapse: collapse;
		}   
    </style>
	</head>
	<body>
		<script type="text/javascript">
			var myTable = document.createElement("table");
			//使用两层表for循环嵌套动态创建表格的tr和td节点
			for(var i=1;i<=9;i++) {
				//创建
				var tr = document.createElement("tr");
				for(var j=1;j<=9;j++) {
					var td = document.createElement("td");
					//设置td内部的文本
					td.innerHTML = i + "X" + j + "=" + (i*j);
					//追加td
					tr.appendChild(td);
				}
				//追加tr
				myTable.appendChild(tr);
			}
			document.body.appendChild(myTable);
		</script>
		
	</body>
</html>

你可能感兴趣的:(JS基础)