查询列表中对每一条记录提交确认模态窗口后执行 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">&times;</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请求。在这个示例中，我们只是在控制台输出了一条信息。