denis_kontarev,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.table {
-webkit-box-shadow: 0px 0px 1px 0px #ccc;
-moz-box-shadow: 0px 0px 1px 0px #ccc;
box-shadow: 0px 0px 1px 0px #ccc;
width: 100%;
border-collapse: collapse;
}
.table tr:hover td {
filter: opacity(50%);
}
.table tr.active td{
background-color: rgba(255, 255, 0, 1);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let items = JSON.parse(window.localStorage.getItem("active") || "[]");
let trs = [...document.querySelectorAll(".table tr")];
items.forEach(i => trs[i].classList.add("active"));
this.addEventListener("click", ({
target
}) => {
if (target = target.closest(".table tr")) target.classList.toggle("active");
let trsActive = [...document.querySelectorAll(".table tr.active")].map(tr => trs.indexOf(tr));
window.localStorage.setItem("active", JSON.stringify(trsActive))
});
});
</script>
</head>
<body>
<table class="table">
<tbody>
<tr>
<td><span>Текст 1</span></td>
</tr>
</tbody>
</table>
<table class="table">
<tbody>
<tr>
<td><span>Текст 2</span></td>
</tr>
</tbody>
</table>
<table class="table">
<tbody>
<tr>
<td><span>Текст 3</span></td>
</tr>
</tbody>
</table>
</body>
</html>
