python - 所有删除按钮都附加到第一行
问题描述
我有以下代码,它在行中显示一些数据,每个按钮都有“删除”按钮。
在我的情况下,“删除”按钮将始终删除列表中的第一行,即使我尝试删除中间的某些内容或结束列表中的最后一行,第一行也会被删除。
不确定为什么所有按钮在 FOR 循环中都与第一行相关联。
更新#1:我做了一些测试,我可以看到每个按钮都知道它自己的行的正确数据,但是在我点击按钮后,它会点击 data-target="#deleteLocation" 和这个新部分 "#deleteLocation"总是只知道第一行。
路线.py
@org_settings.route("/locations", methods=["GET"])
def locations():
form = LocationForm()
page = request.args.get("page", 1, type=int)
locations = (
Location.query.filter_by(user_id=current_user.id)
.order_by(Location.name.asc())
.paginate(page=page, per_page=5)
)
return render_template(
"settings/locations.html",
title="Locations",
locations_tab="active",
locations=locations,
form=form,
)
@org_settings.route("/locations/<int:location_id>/delete", methods=["GET", "POST"])
@login_required
def delete_location(location_id):
location = Location.query.get_or_404(location_id)
if location.organization != current_user:
abort(403)
db.session.delete(location)
db.session.commit()
flash("Your location has been deleted!", "info")
return redirect(url_for("org_settings.locations"))
位置.html
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Location Name</th>
<th scope="col">Latitude</th>
<th scope="col">Longitude</th>
<th scope="col">Address</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{% for location in locations.items %}
<tr>
<td>{{ location.name }}</td>
<td>{{ location.latitude }}</td>
<td>{{ location.longitude }}</td>
<td>{{ location.address }}</td>
<td>
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#deleteLocation">
<i class="bi bi-trash-fill" style="font-size:18px; color: rgb(255, 255, 255);"></i>
</button>
<!-- Bootstrap Modal -->
<div class="modal fade" id="deleteLocation" data-backdrop="static" data-keyboard="false" tabindex="-1"
aria-labelledby="deleteLocationLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteLocationLabel">Delete Location</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you would like to delete this location?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form action="{{ url_for('org_settings.delete_location', location_id=location.id) }}"
method="POST">
<button type="submit" class="btn btn-danger">Delete</button>
</form>
</div>
</div>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
解决方案
我通过将行 {{ location.id }} 的 ID 添加到 html 部分 data-target="#deleteLocation-{{ location.id }}" 的 ID 来解决它,如下所示
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal"
data-target="#deleteLocation-{{ location.id }}">
<i class="bi bi-trash-fill" style="font-size:18px; color: rgb(255, 255, 255);"></i>
</button>```
<div class="modal fade" id="deleteLocation-{{ location.id }}" data-backdrop=" static" data-keyboard="false"
tabindex="-1" aria-labelledby="deleteLocationLabel" aria-hidden="true">
推荐阅读
- java - 如何隐藏呼叫 UI 并使用自定义 UI 拨打电话?
- swift - NSAttributedString 字体在设置为另一个选择后重置,为什么?
- r - 基于布尔值多列选择列值 - R
- php - 将其他类的 HTML 代码集成到自己的 WP 插件中
- php - 带有 2 个参数的 URL
- python - 使用 python 连接到集群时出错
- java - 如何将此递归 Java 方法转换为迭代?(CodeJam 挑战)
- visual-studio-code - 如何在 VSCode 中更改光标颜色?
- sql-server - 无法从 SQL Server 中的另一个表更新列
- go - Testify Suites 中的 SetupSuite 和 SetupTest 之间的区别