HTML表格中有多个下拉菜单,下拉菜单选定值后,点击按钮将该单元格用下拉菜单选定的值替换
时间: 2023-06-19 20:03:13 浏览: 126
多选下拉菜单控件(HTML)
4星 · 用户满意度95%
可以使用JavaScript来实现这个功能。具体步骤如下:
1. 给每个下拉菜单添加一个唯一的ID。
2. 给按钮添加一个onclick事件,当点击按钮时触发该事件。
3. 在事件处理程序中,使用document.getElementById()方法获取选定的下拉菜单的值。
4. 然后使用innerHTML属性将该单元格的内容替换为选定的值。
以下是一个示例代码:
HTML代码:
```html
<table>
<tr>
<td>
<select id="menu1">
<option value="value1">选项1</option>
<option value="value2">选项2</option>
<option value="value3">选项3</option>
</select>
</td>
<td><button onclick="replaceCell(1)">替换</button></td>
</tr>
<tr>
<td>
<select id="menu2">
<option value="value4">选项4</option>
<option value="value5">选项5</option>
<option value="value6">选项6</option>
</select>
</td>
<td><button onclick="replaceCell(2)">替换</button></td>
</tr>
</table>
```
JavaScript代码:
```javascript
function replaceCell(row) {
var menu = document.getElementById("menu" + row);
var cell = document.getElementsByTagName("tr")[row-1].getElementsByTagName("td")[0];
cell.innerHTML = menu.value;
}
```
说明:
- replaceCell()函数接受一个参数,表示要替换的行数。
- 使用document.getElementById()方法获取选定的下拉菜单的值。
- 使用getElementsByTagName()方法获取该行的第一个单元格。
- 使用innerHTML属性将该单元格的内容替换为选定的值。
阅读全文