<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">
<h3>Bootstrap make table row clickable</h3>
<table class="table table-hover">
<thead class="thead-dark">
<tr class="clickable-row"
data-href="https://fontawesomeicons.com/fa/bootstrap-make-table-row-clickable">
<td>john.doe@example.com</td>
<tr class="clickable-row"
data-href="https://fontawesomeicons.com/fa/bootstrap-make-table-row-clickable">
<td>jane.smith@example.com</td>
<tr class="clickable-row"
data-href="https://fontawesomeicons.com/fa/bootstrap-make-table-row-clickable">
<td>david.johnson@example.com</td>
<tr class="clickable-row"
data-href="https://fontawesomeicons.com/fa/bootstrap-make-table-row-clickable">
<td>sarah.wilson@example.com</td>
<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>
$(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");