时间戳

首页 > 解决方案 > 如何使用 Flask 从 HTML 表中删除数据

html - 如何使用 Flask 从 HTML 表中删除数据

问题描述

我有一个从 Flask 应用程序填充的 HTML 表。填充表格时，我在每一行中插入一个删除按钮。该按钮有一个返回 Flask 应用程序的链接，并包含记录的唯一 ID 号。加载表格后，我可以检查浏览器中的按钮。网址是我所期望的。 <a href="/processDeleteUser/10" class="btn btn-danger" role="button">Delete</a>

但是，当我单击该按钮时，它会将不同的 ID 传递给 Flask 应用程序<a href="/processDeleteUser/7"并删除表的第一行而不是预期的行。请在下面找到我的代码：

  <table class="table table-striped">
    <thead>      
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Password</th>
        <th> </th>
        <th> </th>
      </tr>
    </thead>
    <tbody>
      {% for u in users %}
        {% set uid = u[0] %}
        {% set first = u[2] %}
        {% set last = u[3] %}
        {% set email = u[4] %}
        {% set password = u[5] %}
        <tr>
          <td>{{uid}}</td>
          <td>{{last}}, {{first}}</td>
          <td>{{email}}</td>
          <td>{{password}}</td>          
          <td>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#confirmModal">
              <i style="color:red" class="fa fa-times fa-1x"></i>
            </button>
            
            <!-- Modal -->
            <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="confirmModalLabel">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    Are you sure you want to delete this user?
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <a href="/processDeleteUser/{{uid}}" class="btn btn-danger" role="button">Delete</a>
                  </div>
                </div>
              </div>
            </div>
          </td>          
        </tr>
      {% endfor %}      
    </tbody>
  </table>

标签： htmlflaskjinja2crud

解决方案

我认为错误在循环内部，您在其中多次声明具有相同 id 的模式。onclick我建议您通过按钮事件调用的 javascript 函数来管理取消

<tbody>
    {% for u in users %}
    {% set uid = u[0] %}
    {% set first = u[2] %}
    {% set last = u[3] %}
    {% set email = u[4] %}
    {% set password = u[5] %}
    <tr>
        <td>{{uid}}</td>
        <td>{{last}}, {{first}}</td>
        <td>{{email}}</td>
        <td>{{password}}</td>          
        <td>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-light" onclick="myFunction({{uid}})">
            <i style="color:red" class="fa fa-times fa-1x"></i>
        </button>
        </td>          
    </tr>
    {% endfor %}      
</tbody>

<script>
    function myFunction(id) {
        // handle the cancellation
    }
</script>

推荐阅读