HTML表中 日期选择器选择后隐藏日期选择器,并把该单元格的值替换为选择的日期,添加另外一个按钮,点击该按钮后恢复隐藏的日期选择器
时间: 2023-06-20 11:04:49 浏览: 143
可以使用JavaScript来实现这个功能。
首先,在HTML表格中,需要在需要显示日期选择器的单元格中添加一个input元素,并将其type属性设置为date。
```html
<td>
<input type="date" onchange="hideDatePicker(this)">
<button onclick="showDatePicker(this)">选择日期</button>
</td>
```
然后,在JavaScript中,定义showDatePicker和hideDatePicker两个函数。
```javascript
function showDatePicker(button) {
// 获取单元格中的input元素
var input = button.previousSibling;
// 显示input元素
input.style.display = "block";
// 隐藏按钮
button.style.display = "none";
}
function hideDatePicker(input) {
// 获取单元格中的按钮元素
var button = input.nextSibling;
// 隐藏input元素
input.style.display = "none";
// 显示按钮
button.style.display = "block";
// 将单元格的值替换为选择的日期
input.parentNode.textContent = input.value;
}
```
showDatePicker函数用于显示日期选择器,并隐藏按钮;hideDatePicker函数用于隐藏日期选择器,并显示按钮。在hideDatePicker函数中,还需要将单元格的值替换为选择的日期。
完整的代码如下:
```html
<table>
<tr>
<td>
<input type="date" onchange="hideDatePicker(this)">
<button onclick="showDatePicker(this)">选择日期</button>
</td>
</tr>
</table>
<script>
function showDatePicker(button) {
// 获取单元格中的input元素
var input = button.previousSibling;
// 显示input元素
input.style.display = "block";
// 隐藏按钮
button.style.display = "none";
}
function hideDatePicker(input) {
// 获取单元格中的按钮元素
var button = input.nextSibling;
// 隐藏input元素
input.style.display = "none";
// 显示按钮
button.style.display = "block";
// 将单元格的值替换为选择的日期
input.parentNode.textContent = input.value;
}
</script>
```
阅读全文