Блог

Главная - Вопросы по программированию - Список флажков рядом с таблицей

Список флажков рядом с таблицей

#python #html #flask #checkbox #html-table

#python #HTML #flask #флажок #html-таблица

Вопрос:

Я начинаю экспериментировать с Bootstrap, чтобы сделать сайт красивее, чем моя первая попытка. На странице приведена таблица, сгенерированная с помощью цикла for, который отображает имена устройств в первом столбце и MAC-адреса устройств во втором, которые считываются из базы данных, которую я использую с SQLite3 на python. Ранее, если пользователь хотел удалить запись, он должен был ввести имя устройства, и запись будет удалена с помощью SQLite3 в моей программе на python с использованием Flask. Это неэффективно, поскольку пользователь может удалять только по одному за раз, а ввод имени устройства может быть утомительным. Я думаю, что лучшим вариантом было бы поставить флажок рядом с каждой строкой, чтобы пользователь мог выбирать более 1 записи одновременно и нажимать кнопку, которая удалит все выбранные записи. Я все еще новичок в 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>

Дайте мне знать, если вам нужна дополнительная информация.
Спасибо!

Комментарии:

1. что вы пробовали? Сначала вы должны попробовать что-то и посмотреть, работает ли это.

Ответ №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 /