查询列表中对每一条记录提交确认模态窗口后执行 html
时间: 2024-01-08 10:04:57 浏览: 49
对于查询列表中的每一条记录,可以为每个记录添加一个确认按钮,当用户点击确认按钮时,弹出一个确认模态窗口,用户在模态窗口中确认后,就可以执行相应的操作。以下是一个示例代码:
```html
<!-- 查询列表中的每一条记录 -->
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>确认操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>记录1</td>
<td>
<button class="confirm-btn" data-id="1">确认</button>
</td>
</tr>
<tr>
<td>2</td>
<td>记录2</td>
<td>
<button class="confirm-btn" data-id="2">确认</button>
</td>
</tr>
<!-- 其他记录 -->
</tbody>
</table>
<!-- 确认模态窗口 -->
<div class="modal" id="confirm-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">确认操作</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>是否确认执行操作?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="confirm-yes-btn">是</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">否</button>
</div>
</div>
</div>
</div>
<!-- JavaScript代码 -->
<script>
var confirmBtns = document.querySelectorAll(".confirm-btn");
var modal = document.getElementById("confirm-modal");
var confirmYesBtn = document.getElementById("confirm-yes-btn");
// 遍历所有确认按钮,并为每个按钮添加点击事件
confirmBtns.forEach(function(btn) {
btn.addEventListener("click", function() {
// 获取该记录的编号
var id = btn.dataset.id;
// 弹出确认模态窗口
modal.style.display = "block";
// 点击是按钮时,执行相应操作
confirmYesBtn.addEventListener("click", function() {
// 执行相应的操作,例如提交表单或发送AJAX请求
console.log("执行操作,编号为:" + id);
// 关闭模态窗口
modal.style.display = "none";
});
});
});
</script>
```
在这个示例中,我们定义了一个查询列表,在每一条记录中,添加了一个确认按钮,当用户点击确认按钮时,弹出一个确认模态窗口。在确认模态窗口中,用户可以选择是或否,点击是按钮时,我们执行相应的操作,例如提交表单或发送AJAX请求。在这个示例中,我们只是在控制台输出了一条信息。
阅读全文