html表格增加一行,从表单获取内容
时间: 2024-01-01 14:05:05 浏览: 27
要在HTML表格中增加一行,并从表单中获取内容,可以使用以下的示例代码:
```html
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>28</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>35</td>
<td>女</td>
</tr>
</tbody>
</table>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">年龄:</label>
<input type="number" id="age" name="age"><br><br>
<label for="gender">性别:</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select><br><br>
<button type="button" onclick="addRow()">添加行</button>
</form>
<script>
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(); // 插入新行
var name = document.getElementById("name").value; // 获取姓名输入框的值
var age = document.getElementById("age").value; // 获取年龄输入框的值
var gender = document.getElementById("gender").value; // 获取性别下拉框的值
var cell1 = row.insertCell(0); // 插入新列
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = name; // 设置单元格内容
cell2.innerHTML = age;
cell3.innerHTML = gender;
}
</script>
```
这个例子中,我们使用了一个表单来获取新行的数据,然后将数据插入到表格中。当用户点击“添加行”按钮时,会调用addRow()函数,该函数首先获取表单中的数据,然后使用insertRow()方法插入一行,再使用insertCell()方法插入三个单元格,并将数据设置为单元格的内容。最后,新行被添加到表格的末尾。