Bootstrap Make Table Row Clickable
Bootstrap Make Table Row Clickable:To make a table row clickable in Bootstrap using the "data-href" attribute, you need to assign a URL or a link to the attribute value. First, make sure that each table row has a unique identifier. Then, add the "data-href" attribute to the table row and set its value to the desired URL. Next, use JavaScript to handle the click event on the table row. Within the event handler, retrieve the URL from the "data-href" attribute of the clicked row and navigate to that URL using the window.location.href property. By doing this, you enable the table row to act as a clickable link, redirecting users to the specified URL.
Thanks for your feedback!
Your contributions will help us to improve service.
How can I make a table row clickable using Bootstrap?
This code snippet demonstrates how to make table rows clickable using Bootstrap.
When a row with the class "clickable-row" is clicked, a JavaScript event handler is triggered. It prevents the default link behavior, retrieves the URL from the "data-href" attribute of the clicked row, and opens that URL in a new browser tab.
This allows users to navigate to the specified link when they click on a table row.
Bootstrap Make Table Row Clickable Example - Jquery code
<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>
$(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>
Output of Bootstrap Make Table Row Clickable
How can I make a table row clickable using Bootstrap and JavaScript?
This JavaScript code adds a click event listener to table rows with the "clickable-row" class. When a row is clicked, it prevents the default link behavior, retrieves the URL from the "data-href" attribute of the clicked row, and opens that URL in a new tab using the window.open()
method. This allows you to make table rows clickable and navigate to different URLs when clicked.
Bootstrap Make Table Row Clickable - Javscript code
xxxxxxxxxx
<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>