html点击按钮将三个输入框以表格形式展示
时间: 2023-09-11 18:06:48 浏览: 59
可以使用JavaScript来实现,具体步骤如下:
1. 在HTML文件中创建三个输入框和一个按钮,以及用于展示表格的空白div元素:
```html
<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
<button onclick="createTable()">展示表格</button>
<div id="tableContainer"></div>
```
2. 在JavaScript文件中编写createTable函数,该函数会在按钮点击时触发。在函数内部,获取输入框的值并创建一个table元素和三个列头元素,然后将这些元素添加到table中:
```javascript
function createTable() {
// 获取输入框的值
var input1Value = document.getElementById("input1").value;
var input2Value = document.getElementById("input2").value;
var input3Value = document.getElementById("input3").value;
// 创建table和列头
var table = document.createElement("table");
var headerRow = document.createElement("tr");
var header1 = document.createElement("th");
var header2 = document.createElement("th");
var header3 = document.createElement("th");
header1.innerHTML = "Input 1";
header2.innerHTML = "Input 2";
header3.innerHTML = "Input 3";
headerRow.appendChild(header1);
headerRow.appendChild(header2);
headerRow.appendChild(header3);
table.appendChild(headerRow);
// 创建数据行
var dataRow = document.createElement("tr");
var data1 = document.createElement("td");
var data2 = document.createElement("td");
var data3 = document.createElement("td");
data1.innerHTML = input1Value;
data2.innerHTML = input2Value;
data3.innerHTML = input3Value;
dataRow.appendChild(data1);
dataRow.appendChild(data2);
dataRow.appendChild(data3);
table.appendChild(dataRow);
// 将table添加到页面
var tableContainer = document.getElementById("tableContainer");
tableContainer.appendChild(table);
}
```
3. 最后,在CSS文件中添加样式以美化表格:
```css
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #ddd;
}
```
这样,点击按钮后就可以将三个输入框的值以表格形式展示在页面上了。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)