html动态表格的完整代码
时间: 2023-08-17 07:02:18 浏览: 46
HTML动态表格可以通过使用JavaScript来实现。以下是一个简单的示例代码:
```
<html>
<head>
<script>
function createTable() {
var rows = document.getElementById("rows").value; // 获取用户输入的行数
var cols = document.getElementById("cols").value; // 获取用户输入的列数
var table = "<table>";
for (var i = 0; i < rows; i++) {
table += "<tr>";
for (var j = 0; j < cols; j++) {
table += "<td>单元格 " + (i + 1) + "-" + (j + 1) + "</td>"; // 根据行和列生成单元格内容
}
table += "</tr>";
}
table += "</table>";
document.getElementById("result").innerHTML = table; // 将生成的表格插入到页面中
}
</script>
</head>
<body>
<label for="rows">行数:</label>
<input type="number" id="rows" name="rows">
<label for="cols">列数:</label>
<input type="number" id="cols" name="cols">
<button onclick="createTable()">生成表格</button>
<div id="result"></div> <!-- 用于显示生成的表格 -->
</body>
</html>
```
这个代码中包含一个使用`createTable()`函数来生成表格的按钮。用户可以在页面上输入行数和列数,并点击按钮生成相应行数和列数的动态表格。生成的表格会显示在页面上。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)