Skip to content

Instantly share code, notes, and snippets.

@luislobo9b

luislobo9b/table-hover-example.html

Last active September 3, 2023 01:39
Show Gist options
  • Save luislobo9b/7c92fd550a57065538e05cce49c4fdd4 to your computer and use it in GitHub Desktop.
Save luislobo9b/7c92fd550a57065538e05cce49c4fdd4 to your computer and use it in GitHub Desktop.
Download ZIP
table-hover-example.html
Raw
table-hover-example.html
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table hover example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
table tr {
cursor: pointer;
}
table tr.active {
background-color: rgba(197, 215, 242, 0.75);
}
</style>
</head>
<body>
<div class="container py-5">
<div class="row">
<div class="col-12">
<table class="table table-bordered table-striped">
<tr class="table-primary">
<th>Nome</th>
<th>E-mail</th>
</tr>
<tr>
<td>João</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Maria</td>
<td>[email protected]</td>
</tr>
<tr>
<td>José</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Ana</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Carlos</td>
<td>[email protected]</td>
</tr>
</table>
</div>
</div>
</div>
<script>
const table = document.querySelector("table")
table.addEventListener("mousemove", event => {
const trElement = event.target.closest("tr"),
trActive = table.querySelector("tr.active") || table.querySelector("tr:not(.table-primary)")
if (trActive !== trElement && !trElement.classList.contains("table-primary")) {
trActive.classList.remove("active")
trElement.classList.add("active")
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment