使用JavaScript生成一个4X4的表格
以下是使用JavaScript生成4X4表格的代码示例:
<!DOCTYPE html>
<html>
<head>
<title>4X4 Table</title>
<style>
table {
border-collapse: collapse;
width: 50%;
margin: 0 auto;
}
td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table id="myTable"></table>
<script>
// 获取table元素
var table = document.getElementById("myTable");
// 创建4个行和列
for (var i = 0; i < 4; i++) {
var row = document.createElement("tr");
for (var j = 0; j < 4; j++) {
var cell = document.createElement("td");
row.appendChild(cell);
}
table.appendChild(row);
}
</script>
</body>
</html>
在这个示例中,我们首先使用HTML创建一个空的表格元素,并为其添加ID属性以便JavaScript可以找到它。接下来,我们使用JavaScript创建4个行和列,并将它们添加到表格中。在每个列中,我们也创建了一个新的单元格元素,并将其添加到行中。
最后,我们使用CSS样式表来修饰表格和单元格的外观,使其看起来更好看
原文地址: https://www.cveoy.top/t/topic/dStD 著作权归作者所有。请勿转载和采集!