Skip to content

Instantly share code, notes, and snippets.

@luislobo9b

luislobo9b/table-auto-select.html

Last active September 3, 2023 04:09
Show Gist options
  • Save luislobo9b/d4f027a50560bbb794938e6ea7c62a5d to your computer and use it in GitHub Desktop.
Save luislobo9b/d4f027a50560bbb794938e6ea7c62a5d to your computer and use it in GitHub Desktop.
Download ZIP
table-auto-select.html
Raw
table-auto-select.html
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table auto select 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>
<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>
<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>
<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")
loop()
function loop() {
const oldTrActive = table.querySelector("table tr.active") || table.querySelector("table tr"),
newTrActive = oldTrActive.nextElementSibling || table.querySelector("table tr:not(.table-primary)")
oldTrActive.classList.remove("active")
newTrActive.classList.add("active")
tableScroll(newTrActive, "outOfViewport")
// tableScroll(newTrActive, "middleOfViewport")
setTimeout(loop, 1000)
}
function getScrollTop() {
return document.documentElement.scrollTop
}
function tableScroll(trElement, mode) {
let scrollToElement = false,
scrollBlockMode = "center"
if (mode === "middleOfViewport") {
scrollToElement = true
} else if (mode === "outOfViewport") {
const {
y: trPositionY,
height: trHeight
} = trElement.getBoundingClientRect(),
isElementOnViewport = trPositionY >= 0 && (trPositionY + trHeight) < window.innerHeight
if (!isElementOnViewport) {
scrollToElement = true
if (trPositionY < 0) {
scrollBlockMode = "start"
} else {
scrollBlockMode = "end"
}
}
}
if (scrollToElement) {
trElement.scrollIntoView({
block: scrollBlockMode,
behavior: "smooth"
})
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment