function addRow() {var cell5 = row.insertCell(4);cell5.innerHTML = '<input type="date" id="reDate" onchange="replaceDatePicker(this)">';unction replaceDatePicker(datePicker) { var value = datePicker.value; var span = document.createElement('span'); span.innerHTML = value; datePicker.parentNode.insertBefore(span, datePicker); datePicker.style.display = 'none'; datePicker.setAttribute('data-value', value); }function restoreDate(button) { // 获取所在行 var row = button.parentNode.parentNode; // 获取该行的日期选择器 var input = row.querySelector('input[type="date"]'); // 恢复日期选择器 input.style.display = 'inline-block'; input.value = input.getAttribute('data-value') // 移除提示信息 var span = input.parentNode.querySelector('span'); input.parentNode.removeChild(span); } 修改代码,点击确认按钮时执行replaceDatePicker,点击修改时执行restoreDate
时间: 2023-06-19 13:10:07 浏览: 104
请参考以下代码:
```html
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td><input type="date" id="reDate" onchange="replaceDatePicker(this)"></td>
<td><button onclick="restoreDate(this)">修改</button> <button onclick="confirmChange(this)">确认</button></td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td><input type="date" id="reDate" onchange="replaceDatePicker(this)"></td>
<td><button onclick="restoreDate(this)">修改</button> <button onclick="confirmChange(this)">确认</button></td>
</tr>
</table>
<script>
function replaceDatePicker(datePicker) {
var value = datePicker.value;
var span = document.createElement('span');
span.innerHTML = value;
datePicker.parentNode.insertBefore(span, datePicker);
datePicker.style.display = 'none';
datePicker.setAttribute('data-value', value);
}
function restoreDate(button) {
var row = button.parentNode.parentNode;
var input = row.querySelector('input[type="date"]');
input.style.display = 'inline-block';
input.value = input.getAttribute('data-value');
var span = input.parentNode.querySelector('span');
input.parentNode.removeChild(span);
}
function confirmChange(button) {
var row = button.parentNode.parentNode;
var input = row.querySelector('input[type="date"]');
var span = input.parentNode.querySelector('span');
var value = input.value;
span.innerHTML = value;
input.setAttribute('data-value', value);
input.style.display = 'none';
span.style.display = 'inline-block';
}
</script>
```
这段代码实现了一个包含表格、输入框和按钮的页面。在输入框中输入日期时,会调用 `replaceDatePicker` 函数,将输入框替换成一个 `span` 元素,并将输入框中的日期显示在 `span` 中。点击修改按钮时,会调用 `restoreDate` 函数,将 `span` 元素替换回输入框。点击确认按钮时,会调用 `confirmChange` 函数,将输入框中的日期更新到 `span` 中,并将输入框隐藏起来。
阅读全文