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 using javascript code</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> document.addEventListener("DOMContentLoaded", function () { var clickableRows = document.getElementsByClassName("clickable-row"); for (var i = 0; i < clickableRows.length; i++) { clickableRows[i].addEventListener("click", function (e) { e.preventDefault(); // Prevents the default link behavior // Get the URL from the data-href attribute var url = this.getAttribute("data-href"); // Open the URL in a new tab window.open(url, "_blank"); }); } }); </script> </body> </html>