HTML表格中 在日期选择器选择日期后 该单元格值替换为选择的日期,点击另外一个按钮后恢复该单元格日期选择器
时间: 2023-06-18 11:06:29 浏览: 144
点击单元格弹出控件选择日期.rar
可以通过JavaScript实现该功能。具体步骤如下:
1. 在HTML中创建一个表格,其中包含一个日期选择器和一个按钮。
```html
<table>
<tr>
<td id="date-cell">请选择日期</td>
<td><input type="date" id="date-picker"></td>
<td><button onclick="saveDate()">保存</button></td>
</tr>
</table>
```
2. 使用JavaScript获取日期选择器和单元格元素。
```javascript
var datePicker = document.getElementById("date-picker");
var dateCell = document.getElementById("date-cell");
```
3. 编写一个函数,当用户选择日期后,将单元格的值替换为选择的日期,并隐藏日期选择器。
```javascript
function saveDate() {
var selectedDate = datePicker.value; // 获取选择的日期
dateCell.innerHTML = selectedDate; // 将单元格的值替换为选择的日期
datePicker.style.display = "none"; // 隐藏日期选择器
dateCell.style.display = "block"; // 显示单元格
}
```
4. 为单元格元素添加点击事件,当用户点击单元格时,显示日期选择器并隐藏单元格。
```javascript
dateCell.onclick = function() {
datePicker.style.display = "block"; // 显示日期选择器
dateCell.style.display = "none"; // 隐藏单元格
}
```
这样,当用户点击单元格时,日期选择器会显示出来,用户选择日期后,单元格的值会被替换为选择的日期,日期选择器会被隐藏。当用户点击保存按钮时,日期选择器会被隐藏,单元格会显示出来。
阅读全文