js中每增加一行都有"修改"数量的按钮,当单击"修改"按钮时,数量在文本框中显示可以改变数量,并且"修改"按钮变为"确定" 单击"确定"按钮后,修改数量成功,并且数量显示在当前的单元格中,"确定"按钮变为"修改"按钮。的代码
时间: 2024-11-09 12:19:03 浏览: 24
在JavaScript中,你可以通过事件监听和DOM操作来实现这个功能。这里是一个基本的示例,假设HTML结构已经有了一个文本框、两个按钮(初始时一个名为"修改",另一个名为"确定"),并且有一个元素用于显示数量:
```html
<input type="number" id="quantityInput">
<button onclick="toggleAction('modify')">修改</button>
<button onclick="confirmQuantity()">确定</button>
<span id="currentQuantity"></span>
```
对应的JavaScript代码如下:
```javascript
let currentQuantity = 0;
const modifyButton = document.querySelector('.modify');
const confirmButton = document.querySelector('.confirm');
const quantityInput = document.getElementById('quantityInput');
const currentQuantitySpan = document.getElementById('currentQuantity');
// 初始化"确定"按钮
function toggleAction(action) {
if (action === 'modify') {
modifyButton.textContent = '确定';
confirmButton.textContent = '修改';
// 显示输入框,隐藏数量显示
confirmButton.style.display = 'none';
modifyButton.style.display = 'inline-block';
currentQuantitySpan.style.display = 'none';
} else { // 如果是'确定'
confirmButton.textContent = '确定'; // 保持不变
modifyButton.textContent = '修改';
// 验证并更新数量,然后显示在当前单元格
const newQuantity = parseInt(quantityInput.value);
if (isNaN(newQuantity) || newQuantity <= 0) {
alert('请输入有效数量');
} else {
currentQuantity = newQuantity;
currentQuantitySpan.textContent = currentQuantity;
currentQuantitySpan.style.display = 'block';
modifyButton.style.display = 'none';
confirmButton.style.display = 'inline-block';
}
}
}
// 当用户点击"确定"按钮时执行此函数
function confirmQuantity() {
toggleAction('modify'); // 回滚到"修改"状态
}
```
这个示例假设HTML已经包含了`.modify`和`.confirm`类的选择器,实际应用中需要替换为正确的选择器。注意这只是一个简化的版本,实际项目中可能还需要处理更多的边界情况和错误检查。
阅读全文