Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
CREATE TABLE `members` (
`id` int(11) NOT NULL,
`firstname` varchar(30) NOT NULL,
`lastname` varchar(30) NOT NULL,
`address` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `members` (`id`, `firstname`, `lastname`, `address`) VALUES
(1, 'Airi ', 'Satou', 'Tokyo'),
(2, 'Angelica ', 'Ramos', 'London'),
(3, 'Ashton ', 'Cox', 'San Francisco'),
(4, 'Bradley', 'Greer', 'London'),
(5, 'Brenden ', 'Wagner', 'San Francisco');
ALTER TABLE `members`
ADD PRIMARY KEY (`id`);
ALTER TABLE `members`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
index.php
//index.php <!DOCTYPE html> <html> <head> <title>PHP MySQLi Delete Multiple Rows using Checkbox</title> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <div class="row" style="margin-top:20px;margin-bottom:20px;"> <span style="font-size:25px; color:blue"><center><strong>PHP MySQLi Delete Multiple Rows using Checkbox</strong></center></span> <div style="height:20px;"></div> <table class="table table-striped table-bordered table-hover"> <thead> <th></th> <th>Firstname</th> <th>Lastname</th> <th>Address</th> </thead> <form method="POST" action="delete.php"> <tbody> <?php include('conn.php'); $query=mysqli_query($conn,"select * from members"); while($row=mysqli_fetch_array($query)){ ?> <tr> <td align="center"><input type="checkbox" value="<?php echo $row['id']; ?>" name="userid[]"></td> <td><?php echo $row['firstname']; ?></td> <td><?php echo $row['lastname']; ?></td> <td><?php echo $row['address']; ?></td> </tr> <?php } ?> </tbody> </table> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addnew" style="width:200px;"> Add New</button> || <button type="submit" class="btn btn-danger" style="width:200px;"> Delete</button> </form> </div> <?php include('modal.php'); ?> </div> </body> </html>conn.php
//conn.php <?php $conn = mysqli_connect("localhost","root","","testingdb"); if (!$conn) { die("Connection failed: " . mysqli_connect_error()); } ?>modal.php
//modal.php <!-- Modal --> <div class="modal fade" id="addnew" tabindex="-1" aria-labelledby="addnew" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="addnew">Add New</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <form method="POST" action="addnew.php"> <div class="row"> <div class="col-lg-2"> <label class="control-label" style="position:relative; top:7px;">Firstname:</label> </div> <div class="col-lg-10"> <input type="text" class="form-control" name="firstname"> </div> </div> <div style="height:10px;"></div> <div class="row"> <div class="col-lg-2"> <label class="control-label" style="position:relative; top:7px;">Lastname:</label> </div> <div class="col-lg-10"> <input type="text" class="form-control" name="lastname"> </div> </div> <div style="height:10px;"></div> <div class="row"> <div class="col-lg-2"> <label class="control-label" style="position:relative; top:7px;">Address:</label> </div> <div class="col-lg-10"> <input type="text" class="form-control" name="address"> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Save</button> </form> </div> </div> </div> </div>addnew.php
//addnew.php <?php include('conn.php'); $firstname=$_POST['firstname']; $lastname=$_POST['lastname']; $address=$_POST['address']; mysqli_query($conn,"insert into members (firstname, lastname, address) values ('$firstname', '$lastname', '$address')"); header('location:index.php'); ?>delete.php
//delete.php <?php include('conn.php'); if(isset($_POST['userid'])){ foreach ($_POST['userid'] as $id): mysqli_query($conn,"delete from members where id='$id'"); endforeach; header('location:index.php'); } else{ ?> <script> window.alert('Please check user to Delete'); window.location.href='index.php'; </script> <?php } ?>