HTML表格 单元格下拉菜单 点击添加一行
时间: 2023-06-15 19:04:53 浏览: 80
要实现这个功能,你需要使用JavaScript来操作表格,实现以下步骤:
1. 创建一个HTML表格,包含一个下拉菜单和一个“添加行”按钮。
2. 使用JavaScript获取表格对象。
3. 为“添加行”按钮添加单击事件,当单击按钮时,将获取下拉菜单的选项值。
4. 创建一个新的表格行,并使用选项值填充单元格。
5. 将新行添加到表格的末尾。
以下是一个基本的示例代码:
```html
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>30</td>
</tr>
</tbody>
</table>
<select id="mySelect">
<option value="王五,男,28">王五</option>
<option value="赵六,女,35">赵六</option>
</select>
<button onclick="addRow()">添加行</button>
<script>
function addRow() {
var table = document.getElementById("myTable");
var select = document.getElementById("mySelect");
var option = select.options[select.selectedIndex];
var values = option.value.split(",");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = values[0];
cell2.innerHTML = values[1];
cell3.innerHTML = values[2];
}
</script>
```
在这个示例中,我们创建了一个包含三列的表格,并在表格下方添加了一个下拉菜单和一个按钮。当用户单击按钮时,会将选定的下拉菜单选项添加到表格的末尾。
你可以根据自己的需求修改和扩展这个示例代码。