xxxxxxxxxx
<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>