表格旁边的复选框列表答案

【问题标题】：Checkbox list beside table表格旁边的复选框列表
【发布时间】：2021-03-20 16:22:08
【问题描述】：

我已经开始尝试使用 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>

如果您需要更多信息，请告诉我。谢谢！

【问题讨论】：

你尝试了什么？首先你应该尝试一下，看看它是否有效。

标签： python html flask checkbox html-table

【解决方案1】：

只需要在表格中添加一个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>

这就是它的样子 https://jsfiddle.net/bakashyn/a0q3n9bt/3/

【讨论】：