html如何获取多个input中的值并输入在一个表格中
时间: 2023-08-10 08:05:38 浏览: 58
可以通过JavaScript来获取多个input的值,并将这些值输入到一个表格中。
首先,在HTML中需要为每个input元素设置一个id属性,以便在JavaScript中能够获取到这些元素。例如:
```html
<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
```
然后,在JavaScript中可以通过getElementById()方法获取每个input元素的值,然后将这些值添加到表格中。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Input to Table</title>
<script>
function addInputToTable() {
// 获取input元素的值
var input1 = document.getElementById("input1").value;
var input2 = document.getElementById("input2").value;
var input3 = document.getElementById("input3").value;
// 获取表格对象
var table = document.getElementById("myTable");
// 创建新行
var row = table.insertRow();
// 添加单元格并设置值
var cell1 = row.insertCell();
cell1.innerHTML = input1;
var cell2 = row.insertCell();
cell2.innerHTML = input2;
var cell3 = row.insertCell();
cell3.innerHTML = input3;
}
</script>
</head>
<body>
<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
<button onclick="addInputToTable()">Add to Table</button>
<table id="myTable" border="1">
<tr>
<th>Input 1</th>
<th>Input 2</th>
<th>Input 3</th>
</tr>
</table>
</body>
</html>
```
在上述示例代码中,我们首先获取每个input元素的值,并将这些值存储在变量中。然后,我们获取表格对象,创建一个新行,并将每个input的值添加到表格中的单元格中。最后,当用户点击“Add to Table”按钮时,addInputToTable()函数将被调用,从而将input元素的值添加到表格中。