帮我用js做一个可以根据几行,几列,行高,列宽的要求建立可以可创建表格的页面
时间: 2023-09-28 08:13:37 浏览: 39
好的,以下是一个简单的实现,你可以根据需要进行修改:
```html
<!DOCTYPE html>
<html>
<head>
<title>创建表格</title>
</head>
<body>
<label>行数:</label><input type="number" id="rowNum" min="1"><br>
<label>列数:</label><input type="number" id="colNum" min="1"><br>
<label>行高:</label><input type="number" id="rowHeight" min="10"><br>
<label>列宽:</label><input type="number" id="colWidth" min="10"><br>
<button onclick="createTable()">创建表格</button>
<table id="table"></table>
<script>
function createTable() {
var rowNum = document.getElementById("rowNum").value;
var colNum = document.getElementById("colNum").value;
var rowHeight = document.getElementById("rowHeight").value;
var colWidth = document.getElementById("colWidth").value;
if (!rowNum || !colNum || !rowHeight || !colWidth) {
alert("请填写完整信息!");
return;
}
var table = document.getElementById("table");
// 创建表头
var thead = document.createElement("thead");
var tr = document.createElement("tr");
for (var i = 0; i < colNum; i++) {
var th = document.createElement("th");
th.style.width = colWidth + "px";
th.appendChild(document.createTextNode("列" + (i + 1)));
tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
// 创建表体
var tbody = document.createElement("tbody");
for (var i = 0; i < rowNum; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < colNum; j++) {
var td = document.createElement("td");
td.style.width = colWidth + "px";
td.style.height = rowHeight + "px";
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
}
</script>
</body>
</html>
```
在这个例子中,我们使用了 `createElement` 方法来创建表格和单元格,使用了 `appendChild` 方法将它们添加到文档中。同时,我们通过设置单元格的 `style` 属性,来指定单元格的宽度和高度。
你可以直接复制这段代码,然后在本地用浏览器打开,进行测试。