table 旁边的复选框列表

Question

我已经开始尝试 Bootstrap 来制作一个比第一次尝试更漂亮的网站。在页面上是一个用 for 循环生成的 table，它在第一列中显示设备名称，在第二列中显示设备 MAC 地址，它们是从我在 [=20= 中与 SQLite3 一起使用的数据库中读取的].以前，如果用户想要删除一条记录，他们必须输入设备名称，然后在我使用 Flask 的 python 程序中使用 SQLite3 删除该记录。这是低效的，因为用户一次只能删除一个，并且输入设备名称可能很乏味。我认为最好的选择是在每一行旁边放一个复选框，这样用户可以一次 select 超过 1 条记录，然后按下一个按钮将删除所有 selected 记录。我还是 html 的初学者，所以我不知道如何实现它。我如何实现这一点，最好的方法是什么？无论是独立的复选框组，还是 table 中的另一列或其他内容，请记住 table 长度是动态的，因此每条记录都应该有自己的复选框。

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>

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

Answer 1

只需要在 table

中添加一个 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/

table 旁边的复选框列表

Checkbox list beside table

html

python

checkbox

html-table

flask