function updateDate(input) { var date = input.value; // 获取选择的日期 var cell = input.parentNode; // 获取单元格元素 cell.innerHTML = date; // 将日期显示在单元格中 }以上代码执行后,点击一个按钮恢复
时间: 2023-06-18 16:06:42 浏览: 44
单元格原有的内容,可以通过如下代码实现:
```javascript
function restoreCell(cell, originalContent) {
cell.innerHTML = originalContent;
}
// 假设我们有一个按钮来触发恢复操作,其中 cell 是要恢复的单元格元素,originalContent 是单元格原来的内容
var restoreBtn = document.getElementById('restoreBtn');
restoreBtn.addEventListener('click', function() {
var cell = document.getElementById('cellId');
var originalContent = '原来的内容'; // 这里替换成单元格原来的内容
restoreCell(cell, originalContent);
});
```
相关问题
function resetDate() { var cells = document.getElementsByTagName('td'); for (var i = 0; i < cells.length; i++) { var input = cells[i].getElementsByTagName('input')[0]; if (input) { cells[i].innerHTML = '<input type="date" id="myDate" onchange="updateDate(this)">'; } }
这段代码是一个JavaScript函数,它的作用是将HTML表格中的所有单元格转换为日期选择器。具体来说,它首先获取所有表格单元格的引用,然后遍历每个单元格,检查是否有输入框。如果有,它将单元格的HTML内容替换为一个日期选择器输入框,并指定一个名为"updateDate"的函数作为日期更改时的回调函数。
需要注意的是,这段代码中使用了document.getElementsByTagName()函数和getElementsByTagName()函数,它们分别是全局函数和元素对象的方法,用于获取文档中具有指定标签名的元素。此外,该代码还使用了innerHTML属性,用于设置或获取元素的HTML内容。
HTML表格 日期选择器 点击选择后 该单元格值替换为当前选择的日期,点击另一个按钮后恢复日期选择器
要实现这个功能,你可以使用 HTML5 中自带的日期选择器和 JavaScript 来控制表格单元格的值。
首先,在表格中,你可以使用以下代码创建一个日期选择器的单元格:
```html
<td>
<input type="date" id="myDate" onchange="updateDate(this)">
</td>
```
这个单元格里面包含一个 `input` 元素,它的 `type` 属性设置为 `date`,表示这是一个日期选择器。当用户选择日期时,`onchange` 事件会触发 `updateDate` 函数。
接下来,你需要实现 `updateDate` 函数来将选择的日期更新到表格单元格中。代码如下:
```javascript
function updateDate(input) {
var date = input.value; // 获取选择的日期
var cell = input.parentNode; // 获取单元格元素
cell.innerHTML = date; // 将日期显示在单元格中
}
```
这个函数首先获取选择的日期,然后获取单元格元素,最后将日期显示在单元格中。注意,这里使用了 `parentNode` 方法来获取单元格元素。
最后,你需要再添加一个按钮来恢复日期选择器。代码如下:
```html
<button onclick="resetDate()">Reset</button>
```
这个按钮的 `onclick` 事件会触发 `resetDate` 函数。
接下来,实现 `resetDate` 函数来将表格单元格恢复为日期选择器。代码如下:
```javascript
function resetDate() {
var cells = document.getElementsByTagName('td');
for (var i = 0; i < cells.length; i++) {
var input = cells[i].getElementsByTagName('input')[0];
if (input) {
cells[i].innerHTML = '<input type="date" id="myDate" onchange="updateDate(this)">';
}
}
}
```
这个函数首先获取所有的表格单元格元素,然后遍历每个单元格。如果这个单元格包含日期选择器,就将单元格的内容替换为日期选择器。注意,这里使用了 `getElementsByTagName` 方法来获取单元格元素和输入框元素。
完整代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table Date Picker</title>
</head>
<body>
<table>
<tr>
<td>
<input type="date" id="myDate" onchange="updateDate(this)">
</td>
<td>
<input type="date" id="myDate" onchange="updateDate(this)">
</td>
</tr>
<tr>
<td>
<input type="date" id="myDate" onchange="updateDate(this)">
</td>
<td>
<input type="date" id="myDate" onchange="updateDate(this)">
</td>
</tr>
</table>
<button onclick="resetDate()">Reset</button>
<script>
function updateDate(input) {
var date = input.value; // 获取选择的日期
var cell = input.parentNode; // 获取单元格元素
cell.innerHTML = date; // 将日期显示在单元格中
}
function resetDate() {
var cells = document.getElementsByTagName('td');
for (var i = 0; i < cells.length; i++) {
var input = cells[i].getElementsByTagName('input')[0];
if (input) {
cells[i].innerHTML = '<input type="date" id="myDate" onchange="updateDate(this)">';
}
}
}
</script>
</body>
</html>
```