html使用循环生产9*9的复选框
时间: 2023-12-24 12:02:34 浏览: 51
以下是使用HTML和JavaScript循环生成9*9的复选框的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>9x9 Checkbox Table</title>
<script>
function createTable() {
var table = document.getElementById("checkboxTable");
for (var i = 1; i <= 9; i++) {
var row = table.insertRow();
for (var j = 1; j <= 9; j++) {
var cell = row.insertCell();
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "checkbox_" + i + "_" + j;
cell.appendChild(checkbox);
}
}
}
</script>
</head>
<body onload="createTable()">
<table id="checkboxTable"></table>
</body>
</html>
```
在这个示例中,我们使用JavaScript的for循环嵌套来生成一个9x9的表格。对于每个单元格,我们都创建一个新的复选框元素,并将其添加到单元格中。复选框的ID是通过行和列的索引创建的,例如“checkbox_5_3”表示第5行第3列的复选框。
该示例在页面加载时自动调用createTable()函数,该函数将表格插入到页面中,并使用循环创建复选框。可以根据需要修改该函数以生成不同大小的表格或使用不同类型的表格元素。