I've starting experimenting with Bootstrap to make a prettier website than my first try. On the page is a table generated with a for loop which displays Device Names in the first column and Device MAC addresses in the second, which are read from a database I use with SQLite3 in python. Previously if a user wanted to delete a record they had to type in the Device Name, and the record would be deleted using SQLite3 in my python program using Flask. This is inefficient since the user can only delete one at a time, and typing out the device name can be tedious. I think the best option would be to put a checkbox beside each row, so the user can select more than 1 record at a time, and press a button which will delete all the selected records. I'm still a beginner in html, so I have no idea how to implement this. How do I achieve this, and what will be the best way to do it? Whether it's a stand alone checkbox group, or another column in the table or something else, please keep in mind that the table length is dynamic, so each record should have a checkbox of its own.
The html code:
<!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>
</thead>
</table>
</div>
</div>
</body>
</html>
Let me know if you need more info. Thanks!
Aucun commentaire:
Enregistrer un commentaire