html点击按钮将输入数据生成表格
时间: 2023-11-22 11:55:35 浏览: 30
可以使用JavaScript来实现这个功能。下面是一个简单的示例代码:
HTML代码:
```html
<label for="input">输入数据:</label>
<input type="text" id="input">
<button onclick="generateTable()">生成表格</button>
<div id="tableContainer"></div>
```
JavaScript代码:
```javascript
function generateTable() {
// 获取输入框中的数据
var input = document.getElementById("input").value;
// 分割数据为数组
var data = input.split(",");
// 创建表格
var table = document.createElement("table");
// 创建表头
var header = table.createTHead();
var row = header.insertRow(0);
for (var i = 0; i < data.length; i++) {
var cell = row.insertCell(i);
cell.innerHTML = "列" + (i+1);
}
// 创建表格内容
var body = table.createTBody();
row = body.insertRow(0);
for (var i = 0; i < data.length; i++) {
var cell = row.insertCell(i);
cell.innerHTML = data[i];
}
// 在页面中显示表格
var container = document.getElementById("tableContainer");
container.innerHTML = "";
container.appendChild(table);
}
```
当用户在输入框中输入数据后,点击“生成表格”按钮,就会调用`generateTable`函数。该函数首先获取输入框中的数据,然后将数据分割为数组。接着,它创建一个表格,并在表头中添加列名,然后在表格内容中添加数据。最后,它将表格添加到指定的容器中。