点击按钮,生成一个表格,表格5行2列,展示在屏幕中间,用html css js怎么实现
时间: 2023-05-10 09:56:06 浏览: 94
用按钮触发Javascript动态生成一个表格的代码
你可以使用以下代码来实现这个功能:
HTML代码:
```
<button onclick="createTable()">点击生成表格</button>
<div id="table-container"></div>
```
CSS代码:
```
table {
border-collapse: collapse;
margin: auto;
}
td, th {
border: 1px solid black;
padding: 10px;
}
```
JavaScript代码:
```
function createTable() {
var tableContainer = document.getElementById("table-container");
var table = document.createElement("table");
var tbody = document.createElement("tbody");
for (var i = 0; i < 5; i++) {
var row = document.createElement("tr");
for (var j = 0; j < 2; j++) {
var cell = document.createElement("td");
cell.appendChild(document.createTextNode("行 " + (i+1) + ", 列 " + (j+1)));
row.appendChild(cell);
}
tbody.appendChild(row);
}
table.appendChild(tbody);
tableContainer.appendChild(table);
}
```
当用户点击按钮时,`createTable()`函数会被调用,它会创建一个包含5行2列的表格,并将其添加到`table-container`元素中。每个单元格中都包含一个文本节点,显示其所在的行和列。CSS代码用于设置表格的样式,包括边框和内边距。
阅读全文