python - 表格旁边的复选框列表
问题描述
我已经开始尝试使用 Bootstrap 来制作一个比我第一次尝试更漂亮的网站。页面上是一个使用 for 循环生成的表,该表在第一列中显示设备名称,在第二列中显示设备 MAC 地址,它们是从我在 python 中与 SQLite3 一起使用的数据库中读取的。以前,如果用户想要删除一条记录,他们必须输入设备名称,然后使用 Flask 在我的 python 程序中使用 SQLite3 删除该记录。这是低效的,因为用户一次只能删除一个,并且输入设备名称可能很乏味。我认为最好的选择是在每一行旁边放一个复选框,这样用户一次可以选择多条记录,然后按下一个按钮,删除所有选定的记录。我仍然是 html 的初学者,所以我不知道如何实现这一点。我如何实现这一目标,最好的方法是什么?无论是独立的复选框组,还是表格中的其他列或其他内容,请记住表格长度是动态的,因此每条记录都应该有自己的复选框。
html代码:
<!DOCTYPE html>
<html>
<head>
<title>Leer Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<div class="container-fluid">
<h3 class="display-6"><u>Registered Devices</u></h3>
</div>
</head>
<body>
<div class="container-fluid">
<div class="col-md-3">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col" class="col-md-5">Device Name</th>
<th scope="col" class="col-md-7">Device MAC</th>
</tr>
{% for row in data %}
<tr>
<td>
{{row[0]}}
</td>
<td>
{{row[1]}}
</td>
</tr>
{% endfor %}
</thead>
</table>
</div>
</div>
</body>
</html>
如果您需要更多信息,请告诉我。谢谢!
解决方案
只需要在表中添加一个 th 和 td
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th scope="col" class="col-md-5">Device Name</th>
<th scope="col" class="col-md-7">Device MAC</th>
</tr>
{% for row in data %}
<tr>
<td>
<input type="checkbox" name="selected_ids[]" value="{{row[ur_id_pos]}}">
</td>
<td>
{{row[0]}}
</td>
<td>
{{row[1]}}
</td>
</tr>
{% endfor %}
</thead>
</table>
推荐阅读
- logging - NLog 配置未读取布尔属性
- jquery - 关闭 cookie 通知
- c++ - 最佳实践:使用模板时在 main 中包含 .cpp 文件而不是 .h 文件?
- angular - Angular 5.2.0:无法读取 ngZone.run 中未定义的属性
- javascript - 从 js 应用程序下载 TCPDF 文件
- video - Chrome 自动播放视频不起作用
- javascript - 每次渲染都重新输入一个类
- c - 为什么 load_ps() 可以在一台 PC 上工作,而不能在另一台 PC 上工作?
- c++ - 添加 cpp11 插件时出现错误消息“未定义对 boost (...) 的引用”
- postgresql - dataframe.to_sql 索引作为 postgresql 中的主键