screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 5 Modal Example</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .clickable-row { cursor: pointer; } </style> </head> <body> <div class="container"> <h3>Bootstrap make table row clickable</h3> <table class="table table-hover"> <thead class="thead-dark"> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody> <tr class="clickable-row" data-href="https://fontawesomeicons.com/fa/bootstrap-make-table-row-clickable"> <td>John Doe</td> <td>john.doe@example.com</td> <td>1234567890</td> </tr> <tr class="clickable-row" data-href="https://fontawesomeicons.com/fa/bootstrap-make-table-row-clickable"> <td>Jane Smith</td> <td>jane.smith@example.com</td> <td>9876543210</td> </tr> <tr class="clickable-row" data-href="https://fontawesomeicons.com/fa/bootstrap-make-table-row-clickable"> <td>David Johnson</td> <td>david.johnson@example.com</td> <td>5555555555</td> </tr> <tr class="clickable-row" data-href="https://fontawesomeicons.com/fa/bootstrap-make-table-row-clickable"> <td>Sarah Wilson</td> <td>sarah.wilson@example.com</td> <td>9999999999</td> </tr> </tbody> </table> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script> <script> $(document).ready(function () { $(".clickable-row").click(function (e) { e.preventDefault(); // Prevents the default link behavior // Get the URL from the data-href attribute var url = $(this).data("href"); // Open the URL in a new tab window.open(url, "_blank"); }); }); </script> </body> </html>