从表单获取内容加入表格
时间: 2024-02-19 15:57:27 浏览: 35
如果您想要从表单中获取内容并将其添加到表格中,可以通过以下步骤实现:
1. 获取表单中的值,可以使用JavaScript来实现。
2. 在表格中添加一个新行,并将表单中的值插入到新行中。
以下是一个示例代码,可以帮助您实现这个功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>Add Row to HTML Table</title>
<script>
function addRow() {
// 获取表格
var table = document.getElementById("myTable");
// 创建一个新行
var row = table.insertRow(-1);
// 获取表单中的值
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var photo = document.getElementById("photo").value;
// 将值插入到新行中
var cell1 = row.insertCell(0);
cell1.innerHTML = name;
var cell2 = row.insertCell(1);
cell2.innerHTML = age;
var cell3 = row.insertCell(2);
cell3.innerHTML = "<img src='" + photo + "'>";
}
</script>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="age">Age:</label>
<input type="text" id="age" name="age"><br>
<label for="photo">Photo:</label>
<input type="text" id="photo" name="photo"><br>
<input type="button" value="Add Row" onclick="addRow()">
</form>
<table id="myTable">
<tr>
<th>Name</th>
<th>Age</th>
<th>Photo</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td><img src="john-doe.jpg"></td>
</tr>
</table>
</body>
</html>
```
在这个示例代码中,我们添加了一个表单,其中包含三个输入框:姓名、年龄和照片。当用户点击“Add Row”按钮时,我们调用了JavaScript函数addRow(),它会在表格的末尾添加一行,并将表单中的值插入到新行中。在这个示例中,我们将照片的值作为图片的URL来插入到新行中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)